【发布时间】：2014-03-26 19:32:51
【问题描述】：
我的网站本质上是一排交替的全角 div 和图像。
我在移动设备（特别是 iPhone 和 iPad）上遇到了奇怪的行为。页面加载正常。当我旋转手机时，图像会扭曲到超大尺寸。当我将它旋转回来时，它会扭曲到更大的尺寸。本质上，图像变得无法使用。
问题：为什么会发生这种情况？有没有更好的方法来实现 CSS，这样可以避免这种情况？如果没有，解决问题的最简单的 javascript 方法是什么？
这是图像 div 的 CSS：
div.pic-container-1
{
width: 100%;
height: 80vh;
background: url(../images/rt2.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
以下是屏幕截图（iPhone）：
初始加载：
旋转到横向：
回到纵向：
【问题讨论】：
-
由于 vw/vh 单位设置，我遇到了类似的情况。尝试更改它们以进行测试。
-
做到了。将高度更改为
%而不是vh。谢谢。