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: 0;和比例padding-bottom

的容器中

请参阅此代码：http://codepen.io/anon/pen/mBpwF
在示例中，我选择了1440x900 px图像。因此，高度是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%;
}

正如您所看到的那样，如果您调整窗口大小，图像将正确保持其比例

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

webkit：按比例调整图像大小

2 个答案: