如何自动调整大图像的大小，使其适合较小宽度的div容器，同时保持其宽高比？
示例：stackoverflow.com-当图像插入到编辑器面板上，并且图像太大而无法放到页面上时，图像将自动调整大小。
当前回答
我以这种方式在超链接内水平和垂直居中并按比例缩放图像：
#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中进行了测试。
有关居中的更多信息，请参阅此处。
其他回答
如果您使用Bootstrap，只需将img响应类添加到img标记：
<img class="img-responsive" src="img_chania.jpg" alt="Chania">
引导映像
这里有一个解决方案，即使提供的图像太小或太大，无法容纳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);
}
我以这种方式在超链接内水平和垂直居中并按比例缩放图像：
#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中进行了测试。
有关居中的更多信息，请参阅此处。
您可以将图像设置为div的背景，然后使用CSS background size属性：
background-size: cover;
它将“将背景图像缩放到尽可能大，以使背景区域完全被背景图像覆盖。背景图像的某些部分可能在背景定位区域内看不见”--W3Schools
查看我的解决方案：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;
}
