全角图像扭曲取向变化

我的网站本质上是一排交替全宽度的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）：

初始负载：

enter image description here

旋转为横向：

enter image description here

回纵向：

enter image description here

来源

2014-03-26 Ryan Tuck

我经历过，因为** VW/VH **单元的类似设置。尝试改变它们进行测试。 – gramgram

这样做。将高度更改为'％'而不是'vh'。谢谢。 –

变化

height:80vh

到

height:80%

来源

2014-03-26 19:52:35

全角图像扭曲取向变化

回答

相关问题