如何拉伸图像以填充<div>，同时保持图像的纵横比？
如何拉伸图像以填充<div>，同时保持图像的纵横比？
提问于 2018-03-23 00:58:08
我需要使这张图像尽可能地伸展到最大的大小，而不会溢出它的<div>或者扭曲图像。
我无法预测图像的纵横比，因此无法知道是否使用：
<img src="url" style="width: 100%;">或
<img src="url" style="height: 100%;">我不能同时使用(即样式=“宽度：100%；高度：100%；”)，因为这将扩展图像以适应<div>.
<div>具有按屏幕百分比设置的大小，这也是不可预测的。
回答 2
Stack Overflow用户
发布于 2018-03-23 09:55:07
现代浏览器的表现要好得多。您需要做的就是将图像宽度设置为100%。
.container img {
width: 100%;
}因不知道高宽比，所以您必须使用一些脚本。下面是我如何使用jQuery：
CSS
.container {
width: 40%;
height: 40%;
background: #444;
margin: 0 auto;
}
.container img.wide {
max-width: 100%;
max-height: 100%;
height: auto;
}
.container img.tall {
max-height: 100%;
max-width: 100%;
width: auto;
}HTML
<div class="container">
<img src="http://i48.tinypic.com/wrltuc.jpg" />
</div>
<br />
<br />
<div class="container">
<img src="http://i47.tinypic.com/i1bek8.jpg" />
</div>剧本
$(window).load(function(){
$('.container').find('img').each(function(){
var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
$(this).addClass(imgClass);
})
})Stack Overflow用户
发布于 2018-03-23 10:00:43
这不是一个完美的解决方案，但这个CSS可能会有所帮助。缩放是这段代码工作的原因，理论上这个因素应该是无限的，才能理想地用于小图像，但在大多数情况下，2、4或8工作得很好。
#myImage {
zoom: 2; //increase if you have very small images
display: block;
margin: auto;
height: auto;
max-height: 100%;
width: auto;
max-width: 100%;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100007743
复制相关文章
相似问题