如何自动调整大图像的大小，使其适合较小宽度的div容器，同时保持其宽高比？
示例：stackoverflow.com-当图像插入到编辑器面板上，并且图像太大而无法放到页面上时，图像将自动调整大小。
当前回答
有几种方法可以使图像适合＜div＞。
img {
object-fit: cover;
}
CSS对象适合属性用于指定如何调整＜img＞或＜video＞的大小以适合其容器。
此属性告诉内容以多种方式填充容器；例如“保持该纵横比”或“拉伸并尽可能多地占用空间”。
fill-这是默认值。调整图像大小以填充给定尺寸。如有必要，图像将被拉伸或压扁以适合contain-图像保持其纵横比，但调整大小以适应给定的尺寸封面-图像保持其纵横比并填充给定的尺寸。将剪裁图像以适合none-图像未调整大小缩小-图像缩小到无或包含的最小版本
你可以在这里找到更多的工作样本。
其他回答
不要将显式宽度或高度应用于图像标记。相反，给它：
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>
查看我的解决方案：http://codepen.io/petethepig/pen/dvFsA
它是用纯CSS编写的，没有任何JavaScript代码。它可以处理任何大小和方向的图像。
给定这样的HTML：
<div class="image">
<div class="trick"></div>
<img src="http://placekitten.com/415/200"/>
</div>
CSS代码将是：
.image {
font-size: 0;
text-align: center;
width: 200px; /* Container's dimensions */
height: 150px;
}
img {
display: inline-block;
vertical-align: middle;
max-height: 100%;
max-width: 100%;
}
.trick {
display: inline-block;
vertical-align: middle;
height: 150px;
}
事实证明，还有另一种方法可以做到这一点：对象拟合。
<img style='height: 100%; width: 100%; object-fit: contain'/>
将完成工作。当然，不要忘记包含其他必要的属性，如src和alt。
小提琴：http://jsfiddle.net/mbHB4/7364/
所有提供的答案，包括已接受的答案，都只能在假设div包装器大小固定的情况下工作。因此，无论div包装器的大小如何，这都是如何实现的，如果您开发响应页面，这非常有用：
在DIV选择器中编写以下声明：
width: 8.33% /* Or whatever percentage you want your div to take */
max-height: anyValueYouWant /* (In px or %) */
然后将这些声明放入IMG选择器中：
width: "100%" /* Obligatory */
max-height: anyValueYouWant /* (In px or %) */
非常重要：
对于DIV和IMG选择器，maxHeight的值必须相同。
<style type="text/css">
#container{
text-align: center;
width: 100%;
height: 200px; /* Set height */
margin: 0px;
padding: 0px;
background-image: url('../assets/images/img.jpg');
background-size: content; /* Scaling down large image to a div */
background-repeat: no-repeat;
background-position: center;
}
</style>
<div id="container>
<!-- Inside container -->
</div>
