webkit：按比例調整圖像大小

Question

我正在使用jQuery Mobile和Safari（iPad）。 而I'm嵌入一個圖像，如：

 .ui-content img{ 
      display:block; 
      border:1px solid #c8c8b9; 
      -webkit-box-sizing: border-box; 
      -moz-box-sizing: border-box; 
      box-sizing: border-box; 
      max-width:100%;    } 

的問題是，WebKit的寬度爲：

<img src="test.png"> 

與CSS我正嘗試讓這個resonsive

所以正確縮放但高度不會按比例改變。所以它會有像圖像一樣的高度，但只有80％。

我該如何改變這種情況？

Answer 1

到十個分量的縱橫比的技術是包裹在圖像中的容器與height: 0;和比例padding-bottom

見本codepen：http://codepen.io/anon/pen/mBpwF
在我挑選一個1440x900像素的圖片的例子。因此，高度爲寬度的62.5%，所以就用該CSS

div { 
    border: 1px red solid; 
    height: 0; 
    width: 100%; 
    max-width: 1440px; /* the original image width */ 
    padding-bottom: 62.5%; /* the original height in % (1440 * 62.5% = 900px) */ 
} 

img { 
    display: block; 
    width: 100%; 
} 

正如你可以看到，如果你改變窗口的大小時，圖像正確地mantains其比

Answer 2

嘗試增加height: auto;到CSS。這通常對我來說是個訣竅。此外，請確保沒有其他CSS影響圖像的尺寸。

.ui-content img{ 
    display: block; 
    border: 1px solid #c8c8b9; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    max-width: 100%; 
    height: auto;    
}