如何自动调整大图像的大小,使其适合较小宽度的div容器,同时保持其宽高比?
示例:stackoverflow.com-当图像插入到编辑器面板上,并且图像太大而无法放到页面上时,图像将自动调整大小。
如何自动调整大图像的大小,使其适合较小宽度的div容器,同时保持其宽高比?
示例:stackoverflow.com-当图像插入到编辑器面板上,并且图像太大而无法放到页面上时,图像将自动调整大小。
当前回答
有两种方法可以使图像具有响应性。
当图像是背景图像时。#集装箱{宽度:300px;高度:300px;背景图像:url(https://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg);背景尺寸:封面;背景重复:无重复;背景位置:中心;}<div id=“container”><div>在这里运行但是应该使用img标记来放置图像,因为它在SEO方面比背景图像更好,因为您可以在img标记的alt中写入关键字。因此,您可以使图像具有响应性。当图像在img标记中时。#集装箱{最大宽度:400px;溢出:隐藏;}国际货币基金组织{宽度:100%;对象拟合:包含;}<div id=“container”><img src=“https://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg“alt=”your_keyword“/><div>在这里运行
其他回答
最简单的方法是使用对象拟合:
<div class="container">
<img src="path/to/image.jpg">
</div>
.container{
height: 300px;
}
.container img{
height: 100%;
width: 100%;
object-fit: cover;
}
如果您使用Bootstrap,只需添加img响应类并更改为
.container img{
object-fit: cover;
}
事实证明,还有另一种方法可以做到这一点:对象拟合。
<img style='height: 100%; width: 100%; object-fit: contain'/>
将完成工作。当然,不要忘记包含其他必要的属性,如src和alt。
小提琴:http://jsfiddle.net/mbHB4/7364/
我有更好的解决方案,不需要任何JavaScript。它反应灵敏,我经常使用它。通常需要将任何纵横比的图像与具有指定纵横比的容器元素相匹配。必须让这一切都能完全响应。
/*仅用于此演示*/.容器{最大宽度:300px;边距:0自动;}.img框架{方框阴影:3px 3px 6px rgba(0,0,0、.15);背景:#ee0;边距:20px自动;}/*这适用于具有指定纵横比的响应容器*/.纵横比{位置:相对;}.方面-1-1{填充底部:100%;}.方面-4-3{填料底部:75%;}方面-16-9{垫底:56.25%;}/*这是关键部分-定位并将图像适配到容器*/.fit img{位置:绝对;顶部:0;右:0;底部:0;左:0;边距:自动;最大宽度:80%;最大高度:90%}.fit img底部{顶部:自动;}.紧密贴合{最大宽度:100%;最大高度:100%}<div class=“container”><div class=“纵横比aspect-ratio-1-1 img帧”><img src=“https://via.placeholder.com/400x300“class=”fit img“alt=”sample“></div><div class=“纵横比aspect-ratio-4-3 img帧”><img src=“https://via.placeholder.com/400x300“class=”fit img fit img tight“alt=”sample“></div><div class=“纵横比aspect-ratio-16-9 img帧”><img src=“https://via.placeholder.com/400x400“class=”fit img“alt=”sample“></div><div class=“纵横比aspect-ratio-16-9 img帧”><img src=“https://via.placeholder.com/300x400“class=”fit img fit img bottom“alt=”sample“></div></div>
您可以独立设置最大宽度和最大高度;图像将遵循最小的图像(取决于图像的值和纵横比)。您还可以将图像设置为按需对齐(例如,对于无限白色背景上的产品图片,您可以轻松地将其定位到中心底部)。
让它变得简单!
给容器一个固定的高度,然后为容器内的img标记设置宽度和最大高度。
<div style="height: 250px">
<img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>
不同的是,您将宽度设置为100%,而不是最大宽度。
将图像所需的高度和宽度提供给包含<img>标记的div。不要忘记在正确的样式标记中给出高度/宽度。
在<img>标记中,将最大高度和最大宽度设置为100%。
<div style="height:750px; width:700px;">
<img alt="That Image" style="max-height:100%; max-width:100%;" src="">
</div>
正确后,可以在适当的类中添加详细信息。