使用 jQuery 或 CSS 保持图像比例

Posted

技术标签:

【中文标题】使用 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>

【讨论】:

以上是关于使用 jQuery 或 CSS 保持图像比例的主要内容,如果未能解决你的问题,请参考以下文章

根据宽度计算div的高度并保持比例[重复]

在IE 11中使用max-width和max-height保持图像比例

jquery animate 使用方形矩形图像创建缩小效果以适应窗口宽度或高度并保持纵横比

保留缩略图中的原始比例

用CSS按比例调整图像大小,有可能吗?

如何使用 calc (width - X) 保持图像比例