使用 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 保持图像比例的主要内容,如果未能解决你的问题,请参考以下文章
在IE 11中使用max-width和max-height保持图像比例