使用 jQuery 或 CSS 保持图像比例

Posted 2023-03-06

【中文标题】使用 jQuery 或 CSS 保持图像比例

【英文标题】：Keep img ratio with jQuery or CSS

【发布时间】：2014-02-07 21:09:43

【问题描述】：

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

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

图像包含在 .picture div 中：

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

例如：

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

这是模板：http://bettercheckthekids.com/pirlo/index.html

【问题讨论】：

这里的邮政编码....随机网址不建议寻求答案！ :)

在 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>