如何自动调整大图像的大小,使其适合较小宽度的div容器,同时保持其宽高比?


示例:stackoverflow.com-当图像插入到编辑器面板上,并且图像太大而无法放到页面上时,图像将自动调整大小。


当前回答

您可以将图像设置为div的背景,然后使用CSS background size属性:

background-size: cover;

它将“将背景图像缩放到尽可能大,以使背景区域完全被背景图像覆盖。背景图像的某些部分可能在背景定位区域内看不见”--W3Schools

其他回答

不要将显式宽度或高度应用于图像标记。相反,给它:

max-width:100%;
max-height:100%;

此外,高度:自动;如果只想指定宽度。

例子:http://jsfiddle.net/xwrvxser/1/

国际货币基金组织{最大宽度:100%;最大高度:100%;}.肖像{高度:80px;宽度:30px;}.景观{高度:30px;宽度:80px;}.方形{高度:75px;宽度:75px;}纵向分区<div class=“纵向”><img src=“http://i.stack.imgur.com/xkF9Q.jpg"></div>景观部<div class=“landscape”><img src=“http://i.stack.imgur.com/xkF9Q.jpg"></div>方形分区<div class=“square”><img src=“http://i.stack.imgur.com/xkF9Q.jpg"></div>

您必须告诉浏览器您放置它的高度:

.example {
    height: 220px; /* DEFINE HEIGHT */
    background: url('../img/example.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

有几种方法可以使图像适合<div>。

img {
    object-fit: cover;
}

CSS对象适合属性用于指定如何调整<img>或<video>的大小以适合其容器。

此属性告诉内容以多种方式填充容器;例如“保持该纵横比”或“拉伸并尽可能多地占用空间”。

fill-这是默认值。调整图像大小以填充给定尺寸。如有必要,图像将被拉伸或压扁以适合contain-图像保持其纵横比,但调整大小以适应给定的尺寸封面-图像保持其纵横比并填充给定的尺寸。将剪裁图像以适合none-图像未调整大小缩小-图像缩小到无或包含的最小版本

你可以在这里找到更多的工作样本。

最简单的方法是使用对象拟合:

<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/