使用 jQuery 或 CSS 保持图像比例答案

【问题标题】：Keep img ratio with jQuery or CSS使用 jQuery 或 CSS 保持图像比例
【发布时间】：2014-02-07 21:09:43
【问题描述】：

超过 910 像素，我有一个固定的 img，它占据窗口 100% 的高度，宽度为：auto;。在加载时，图像始终具有良好的比例，但是当我（从底部）缩小时，它会自行扭曲。

宽度保持不变，不会缩小。

图像包含在 .picture div 中：

.picture {
float: left;
position: fixed;
height: 100%;
width: auto;
}

例如：

有没有办法强制图像保持原来的比例，也许使用 jQuery？右边的内容已经根据图像宽度改变了它的宽度。

【问题讨论】：

这里的邮政编码....随机网址不建议寻求答案！ :)
在 Safari 7.0.1 中按预期工作
@Lars Beck ：奇怪，因为当我在 Safari 7.0.1 中从底部调整大小时，比例不好。
@cfocket 该死的，我从“底部”读了一遍......给图像max-width: 100%;应该可以解决问题，此外width: auto;是默认值。
@LarsBeck：更好，但我的脚本适应正确的内容宽度不再运行那么好。当我再次增加窗口时，计算图片的新宽度时遇到了麻烦。嗯，那是另外的事情。再次感谢

【解决方案1】：

我会建议您另一种方法来解决您的问题。如果您使用引导程序，您可以使用 div 来制作可调整大小的图像。

 <div class="img-responsive">
     <img src="test.jpg" width='xxx' height='yyy' alt='test'>
  </div>

【讨论】：