全角圖像扭曲取向變化

我的網站本質上是一排交替全寬度的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

全角圖像扭曲取向變化

回答

相關問題