响应式图像大小调整在 iPad 上不起作用答案

【问题标题】：responsive img resizing doesn't work on iPad响应式图像大小调整在 iPad 上不起作用
【发布时间】：2012-11-23 11:21:25
【问题描述】：

我的作品集网站无法在 iPad 和 iPhone 上查看（iPhone - 我有一个单独的样式表，可以根据屏幕尺寸加载 - 但仍然不理想）

我为每个图像都有一个类，如下所示：

<img src="6.jpg" class="resize" />

这意味着它被调整到窗口的高度，这意味着任何查看器屏幕上的最大可能图像：

.resize {height: 100%; width:auto;}

这很好用，但在 iPad 和 iPhone 上，图像似乎以一个可笑的大版本显示，比如 1000% 或类似的东西。为什么这段代码不能在移动设备上正常显示？

谢谢

这是我的代码：

<div id="maincontainer" >

<p><i>A Working Title</i></p>



<div id="img_container">
<img src="6.jpg" class="resize" /></div>
<div id="img_text">Caption text</div>

</div>

和css：

@charset "utf-8";
/* CSS Document */

#maincontainer {
height: 100%;
max-height:100%;
width:100%; max-width:100%;
}

#img_container {
height: 100%;
max-height:100%;
width:100%; max-width:100%;
}

.resize {
height: 100%; width:auto;
}

【问题讨论】：

多一点代码会很有用;)

标签： iphone css ipad resize image-resizing

【解决方案1】：

它可能会达到其父容器的高度。而不是height: 100%; 尝试使用width:100%;。如果这不起作用，您可以粘贴您的代码吗？

【讨论】：

这是一个示例页面：link 你可以在那里查看源代码。图像和标题的容器也设置为 100% 高度：#img_container { height: 100%; max-height:100%; width:auto;}。如果我输入width:100%，那么图像的比例将不正确。如您所见，我的样式表确实很少...

【解决方案2】：

你只是不必将width:100%添加到.resize类（就像@JCBiggar说的），同样删除height:100%属性，默认为height:auto;：

HTML：

<div id="maincontainer" >
   <p><i>A Working Title</i></p>
   <div id="img_container">
      <img src="6.jpg" class="resize" /></div>
   <div id="img_text">Caption text</div>
</div>

CSS：

#maincontainer {
   height: 100%;
   max-height:100%;
   width:100%;
}

#img_container {
}

.resize {
   width:100%;
}

工作示例（小提琴）： http://jsfiddle.net/DLJrV/1/

【讨论】：

嗯，我将width:100% 添加到父img_container div 中，但这似乎并没有解决问题。有任何想法吗？我无法将 100% 宽度添加到 .resize 类，因为它不会以正确的比例调整图像大小。
@Estidog：是的，现在我可以看到一些代码，检查我的编辑，应该可以！ ;)

【解决方案3】：

我只会定位#img_container 的图像，而不是给图像一个类。有点像....

    #img_container img{
    max-width: 100%;
    height: auto;
}

这似乎有效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<style> 
@charset "utf-8";
/* CSS Document */

.container{
    width: 100%;
}

#img_container{
    width: 100%;
    height: auto;
}


#img_container img {
height: auto;
max-height:100%;

}

   </style>



</head>

<body>


                 <div class="container">

                    <div id="img_container">
                    <img src="6.jpg"/>
                    </div>

                 </div>


</body>
</html>

【讨论】：

非常感谢！这是一种使其在浏览器/屏幕尺寸之间交叉兼容的优雅方式。