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;    
}