如何自动调整大图像的大小，使其适合较小宽度的div容器，同时保持其宽高比？
示例：stackoverflow.com-当图像插入到编辑器面板上，并且图像太大而无法放到页面上时，图像将自动调整大小。
当前回答
这里有一个解决方案，即使提供的图像太小或太大，无法容纳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);
}
其他回答
正如这里所回答的，你也可以使用vh单位而不是最大高度：如果它在你的浏览器（如Chrome）上不起作用，100%：
img {
max-height: 75vh;
}
下面的代码改编自以前的答案，由我使用名为storm.jpg的图像进行测试。
这是显示图像的简单页面的完整HTML代码。这很完美，我用www.resizemybrowser.com测试过。把CSS代码放在HTML代码的顶部，放在你的头部下面。把图片代码放在你想要的地方。
<html>
<head>
<style type="text/css">
#myDiv
{
height: auto;
width: auto;
}
#myDiv img
{
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
</style>
</head>
<body>
<div id="myDiv">
<img src="images/storm.jpg">
</div>
</body>
</html>
让它变得简单！
给容器一个固定的高度，然后为容器内的img标记设置宽度和最大高度。
<div style="height: 250px">
<img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>
不同的是，您将宽度设置为100%，而不是最大宽度。
<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>
查看我的解决方案：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;
}
