如何自动调整大图像的大小，使其适合较小宽度的div容器，同时保持其宽高比？
示例：stackoverflow.com-当图像插入到编辑器面板上，并且图像太大而无法放到页面上时，图像将自动调整大小。
当前回答
事实证明，还有另一种方法可以做到这一点：对象拟合。
<img style='height: 100%; width: 100%; object-fit: contain'/>
将完成工作。当然，不要忘记包含其他必要的属性，如src和alt。
小提琴：http://jsfiddle.net/mbHB4/7364/
其他回答
此解决方案不会拉伸图像并填充整个容器，但会剪切部分图像。
HTML格式：
<div><img src="/images/image.png"></div>
CSS:
div {
width: 100%;
height: 10em;
overflow: hidden;
img {
min-width: 100%;
min-height: 100%;
}
查看我的解决方案：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标记设置宽度和最大高度。
<div style="height: 250px">
<img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>
不同的是，您将宽度设置为100%，而不是最大宽度。
您可以将图像设置为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>
