0

我无法在 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;
}
4

3 回答 3

1

我只会针对#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>
于 2012-12-05T17:16:43.927 回答
1

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

于 2012-12-05T15:27:48.503 回答
0

您只是不必添加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/

于 2012-12-05T15:35:53.420 回答