如何自动调整大图像的大小，使其适合较小宽度的div容器，同时保持其宽高比？
示例：stackoverflow.com-当图像插入到编辑器面板上，并且图像太大而无法放到页面上时，图像将自动调整大小。
当前回答
事实证明，还有另一种方法可以做到这一点：对象拟合。
<img style='height: 100%; width: 100%; object-fit: contain'/>
将完成工作。当然，不要忘记包含其他必要的属性，如src和alt。
小提琴：http://jsfiddle.net/mbHB4/7364/
其他回答
您可以将图像设置为div的背景，然后使用CSS background size属性：
background-size: cover;
它将“将背景图像缩放到尽可能大，以使背景区域完全被背景图像覆盖。背景图像的某些部分可能在背景定位区域内看不见”--W3Schools
所有提供的答案，包括已接受的答案，都只能在假设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的值必须相同。
这里有一个解决方案，即使提供的图像太小或太大，无法容纳div，它也可以在div中垂直和水平对齐img，而不进行任何拉伸。
HTML内容：
<div id="myDiv">
<img alt="Client Logo" title="Client Logo" src="Imagelocation" />
</div>
CSS内容：
#myDiv
{
height: 104px;
width: 140px;
}
#myDiv img
{
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
jQuery部分：
var logoHeight = $('#myDiv img').height();
if (logoHeight < 104) {
var margintop = (104 - logoHeight) / 2;
$('#myDiv img').css('margin-top', margintop);
}
以下内容非常适合我：
img{
height: 99999px;
object-fit:contain;
max-height: 100%;
max-width: 100%;
display: block;
margin: auto auto;
}
我以这种方式在超链接内水平和垂直居中并按比例缩放图像：
#link {
border: 1px solid blue;
display: table-cell;
height: 100px;
vertical-align: middle;
width: 100px;
}
#link img {
border: 1px solid red;
display: block;
margin-left: auto;
margin-right: auto;
max-height: 60px;
max-width: 60px;
}
它在Internet Explorer、Firefox和Safari中进行了测试。
有关居中的更多信息，请参阅此处。
