html - 全宽图像在方向改变时扭曲

Question

我的网站本质上是一排交替的全 Angular 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):

初始加载:

旋转到横向:

返回肖像:

Answer 1

改变

高度:80vh

到

高度:80%