HTML img 百分比在 iPad 中看起来很尴尬

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

示例网址如下：http://www.stringroot.com/postid/01a32j1a7

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

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

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

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

您需要

将图像设置为元素的背景，您正在设置的宽度（应该在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 中删除图像

这应该足以让你开始:)

有几种方法可以解决您的问题，我将在这里回答 TL;DR; 答案，我的 2 美分在下面。

方法一：

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

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

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

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

相关内容

最新更新

热门标签：