如何自动调整大图像的大小,使其适合较小宽度的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>

正确后,可以在适当的类中添加详细信息。