Question

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

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

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

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

我是css和前端的新手。任何指针都会对我有所帮助。

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

Answer 1

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

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

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

然后从.fancybox

中删除图像

这应该足以让你开始：）

Answer 2

有几种方法可以解决你的问题，我会把TL; DR;回答这里，以及我的下面的两点。

方法1：

<强> 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％”呈现为宽度= 600px的75％（450px），高度=未定义值的75％（其中浏览器理解为height：auto;）。请注意，您的图像是1440x900，因此450px不是图像原始宽度的75％。

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

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

另一个问题是图像的大小。您的图像在客户端调整大小，这意味着服务器仍在向用户发送完整图像。如果用户没有点击图像以全尺寸查看图像，那么您浪费的带宽比提供缩略图所需的带宽大2倍。如果您创建了20个图像的图库，并且用户只查看一个图像库，则浪费的带宽将乘以19倍。通常，图像缩略图和完整图像应该是2个不同大小的不同文件，仅在需要时由服务器提供。（如果您使用这种方法，您将能够以干净，有效的方式解决您的问题。）

html img百分比在ipad看起来很尴尬

2 个答案: