如何自动调整大图像的大小，使其适合较小宽度的div容器，同时保持其宽高比？
示例：stackoverflow.com-当图像插入到编辑器面板上，并且图像太大而无法放到页面上时，图像将自动调整大小。
当前回答
让它变得简单！
给容器一个固定的高度，然后为容器内的img标记设置宽度和最大高度。
<div style="height: 250px">
<img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>
不同的是，您将宽度设置为100%，而不是最大宽度。
其他回答
最简单的方法是使用对象拟合：
<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;
}
当图像太小时，Thorn007的公认答案不起作用。
为了解决这个问题，我添加了一个比例因子。这样，它会使图像变大，并填充div容器。
例子：
<div style="width:400px; height:200px;">
<img src="pix.jpg" style="max-width:100px; height:50px; transform:scale(4); transform-origin:left top;" />
</div>
笔记：
对于WebKit，必须添加-WebKit transform:scale（4）-webkit转换原点：左上；在风格上。比例因子为4时，最大宽度=400/4=100，最大高度=200/4=50另一种解决方案是将最大宽度和最大高度设置为25%。这更简单。
正如这里所回答的，你也可以使用vh单位而不是最大高度：如果它在你的浏览器（如Chrome）上不起作用，100%：
img {
max-height: 75vh;
}
事实证明，还有另一种方法可以做到这一点：对象拟合。
<img style='height: 100%; width: 100%; object-fit: contain'/>
将完成工作。当然，不要忘记包含其他必要的属性，如src和alt。
小提琴：http://jsfiddle.net/mbHB4/7364/
检查我的答案，使图像响应-最简单的方法-
img{
width: 100%;
max-width: 800px;
}
