1

我需要显示高度和宽度设置为某个百分比的图像，例如 img src="image.jpg" width="75%" height="75%" 。这适用于所有 PC 的浏览器。当我在 ipad 或其他平板电脑浏览器中打开相同的网页时，图像看起来很尴尬。宽度会非常小，并且图像的高度会在整个平板电脑的高度上缩放。

示例网址在这里： http: //www.stringroot.com/postid/01a32j1a7

我在我的 css 中做错了什么或设置图像的高度和宽度？

我应该继续使用一些公式将百分比转换为像素吗？

我是 CSS 和前端的新手。任何指示都会对我有很大帮助。

我只想显示整个图像的 50%，点击后我将显示完整图像。

4

2 回答 2

0

您需要将图像设置为元素的背景，您设置的宽度（应该在 css 中设置而不是属性）将改变图像的大小，而不是隐藏其中的一些。

//Markup
<div style="background: url(/site_media/rao_soft2771/ileana7a_.jpg) 0 0 no-repeat;">
</div>

.fancybox {
    height: 75%;
    width: 75%;
    overflow: hidden;
}

然后从 .fancybox 中删除图像

这应该足以让你开始:)

于 2013-09-04T12:07:47.243 回答
0

有几种方法可以解决您的问题，我会放一个 TL;DR; 在这里回答，下面是我的 2cents。

方法一：

HTML

<div class="wrapper">
   <div class="img_wrapper">
      <a href=""><img src="image.jpg" class="visible_img"/></a>
   </div>
   <img src="image.jpg" class="invisible_img"/>
</div>

（两张图片使用相同的img src）

CSS

.wrapper{
    position: relative;
    float: left;
    overflow: hidden;
}

.img_wrapper{
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

img.invisible_img{
    visibility: hidden;
}

img.visible_img{
    width: 50%;
    height: 50%;
}

方法2使用CSS scale()：简单地给你原来的img一个类：

HTML

<img src="image.jpg" class="resized_img"/>

CSS

.resized_img{
    -webkit-transform: scale(0.75);
       -moz-transform: scale(0.75);
        -ms-transform: scale(0.75);
         -o-transform: scale(0.75);
            transform: scale(0.75);
    -webkit-transform-origin: 0 0;
       -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
         -o-transform-origin: 0 0;
            transform-origin: 0 0;
}

不过，对于我提供的两种方法，容器（li）仍将占据整个图像的宽度和高度。

关于您的问题的一些想法：

使用图像容器的宽度和高度计算百分比宽度和高度。在您的示例链接中，图像的容器（li）的宽度为 600px，并且没有给出高度值。在 PC 浏览器上，您的width="75%" height="75%"呈现为 width = 600px 的 75%（即 450px），height = 未定义值的 75%（浏览器将其理解为 height: auto; ）。请注意，您的图片为 1440x900，因此 450 像素不是图片原始宽度的 75%。

在您特定的移动浏览器（ipad）上，它不像 PC 浏览器那样灵活，并且将您的高度 = 75% 理解为它的容器可以达到的某个最大可能高度的 75%（这是一个巨大的高度）。这就是为什么你的图像是倾斜的。

通常，我们鼓励您根据屏幕尺寸（以及容器的尺寸）显示图像，而不是作为其原始尺寸的一部分。由于每个用户的屏幕不同，对于某些用户，您的图像可能会显得太小或太大。

另一个问题是图像的大小。您的图像在客户端调整大小，这意味着服务器仍在将完整图像发送给用户。如果用户没有单击图像以查看完整尺寸，那么您浪费的带宽比提供缩略图所需的带宽多约 2 倍。如果你制作一个包含 20 张图片的图片库，而用户只查看一张，那么浪费的带宽将增加 19 倍。通常，图像缩略图和完整图像应该是 2 个不同大小的不同文件，仅在需要时由服务器提供。（如果您使用这种方法，您也将能够以干净有效的方式解决您的问题）。

于 2013-09-05T19:02:34.330 回答