css - webkit:按比例调整图像大小

Question

我正在使用 jquery mobile 和 Safari (iPad)。 我嵌入了一张图片，例如:

<img src="test.png">

所以我试图通过 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%;             }

问题是，在 webkit 上，宽度会正确缩放，但高度不会按比例改变。因此它的高度将与图像的全宽相同，但例如只有 80% 的宽度。

我怎样才能改变这个？

Answer 1

尝试将 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;             
}