Question

我有以下HTML：

<body>
  <div id="page">
    <ul id="images">
      <li class="image">
        <img src="portrait.jpg"/>
      </li>
    </ul>
    <div id="trailing-content">
      <p>line 1</p>
      <p>line 2</p>
      <p>line 3</p>
      <p>line 4</p>
      <p>line 5</p>
      <p>line 6</p>
      <p>line 7</p>
      <p>line 8</p>
    </div>
  </div>
</body>

使用以下CSS：

body, html{

  width:100%;
  height:100%;

}

body, div, ul, li{

  border:0;
  margin:0;
  padding:0

}

ul, li{

  list-style:none;

}

#page{

  width:75%;
  height:100%;

  margin:0 auto;

}

#images{

  position:relative;

  width:100%;
  height:70%;

  overflow:hidden;

}

#images .image{

  width:100%;
  height:100%;

  text-align: center;

}

#images .image img{

  max-width:100%;
  max-height:100%;

  margin:0 auto;

}

此处的预期结果是可见图像在给定时间最大为屏幕高度的70％。这在主浏览器的桌面版本（经过测试的Firefox，Chrome，Safari）中非常有效，正如您在codepen中看到的那样。

但是在移动浏览器中（特别是在运行iOS6的iPhone 4上的Safari和Chrome Mobile中），图像仍然很大（由CSS中的overflow:hidden规则剪切）并且不会适当地约束它的大小。

iPhone截图：

enter image description here

以下是桌面版本的应用程序：

desktop

奇怪的是，只有当它们是#images标记之后的后续内容时才会发生这种情况（在本例中为#trailing-content）。这表示图像忽略了其父级尺寸，仅表示实际的iPhone屏幕尺寸。

更新

我仍然不知道造成这种情况的原因，并且已经注意到iOS7实际上正常运行。但是我不愿意在这里转发iOS6支持，因此决定将此问题置于赏金之中。

Answer 1

大多数移动设备都使用webkit。您是否尝试过任何webkit css选项？

e.g。

body {
   -webkit-text-size-adjust: none;
}

以下是webkit的一些选项，包含良好的文档（我认为还有更多）：

http://css-infos.net/properties/webkit

编辑：

另一个注意事项当你删除max-height属性时会发生什么？

Answer 2

我会尝试以下方法：

max-width: 70%;
height: auto;
width: auto;

这样，图像应该正确调整大小而不进行裁剪。但是，我已经遇到了大图像的裁剪问题，我只需要复制并调整大小以使其正常工作。

Answer 3

在处理高度时，避免相对于屏幕尺寸的百分比。使用嵌套元素和隐藏溢出设置基于百分比的高度和宽度约束就像要求麻烦一样。您是否看到图像被裁剪，以使其全高度完全适合屏幕？

当然，你可以继续进行试验和错误，但在我看来这是浪费时间（也是神经）。

相反，只需设置max-width: 100%，例如max-height: 500px，以避免在大屏幕上过大，并让您的内容自由向下滚动。

如果您希望自己的网页完全响应，请使用 CSS media queries 。

在iOS（可能还有其他移动设备）中出现奇怪的图像高度行为？

3 个答案: