全方位图像在方向变化时扭曲

Question

我的网站基本上是一排交替的全角度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

更改

height:80vh

到

height:80%