Question

我的投资组合网站在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;
}

Answer 1

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

Answer 2

我只是定位#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>

Answer 3

您不必将width:100%添加到.resize类（如@JCBiggar所说），也删除height:100%属性，默认为height:auto;：< / p>

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/

响应式图像调整大小不适用于iPad

3 个答案:

HTML：

CSS：