webkit：按比例调整图像大小答案

【问题标题】：webkit: resize images in ratiowebkit：按比例调整图像大小
【发布时间】：2014-03-07 13:27:41
【问题描述】：

我正在使用 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%。

我该如何更改？

【问题讨论】：

你试过了吗？

标签： css image webkit liquid

【解决方案1】：

尝试在 CSS 中添加 height: auto;。这通常对我有用。此外，请确保没有其他 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;             
}

【讨论】：

【解决方案2】：

保持纵横比的一种技术是用height: 0; 和成比例的padding-bottom 将图像包装在一个容器中

查看此代码笔：http://codepen.io/anon/pen/mBpwF
在示例中，我选择了一个 1440x900px 图像。因此高度是宽度的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%;
}

如您所见，如果您调整窗口大小，图像会正确保持其比例

【讨论】：