如何自动调整大图像的大小，使其适合较小宽度的div容器，同时保持其宽高比？
示例：stackoverflow.com-当图像插入到编辑器面板上，并且图像太大而无法放到页面上时，图像将自动调整大小。
当前回答
最简单的方法是使用对象拟合：
<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;
}
其他回答
下面的代码改编自以前的答案，由我使用名为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>
解决方法很简单，只需要一点数学。。。
只需将图像放在div中，然后放在指定图像的HTML文件中。使用图像的像素值以百分比形式设置宽度和高度值，以计算宽度与高度的精确比率。
例如，假设您的图像宽度为200像素，高度为160像素。您可以放心地说，宽度值将为100%，因为它是较大的值。要计算高度值，只需将高度除以宽度即可得到80%的百分比值。在代码中，它看起来像这样。。。
<div class="image_holder_div">
<img src="some_pic.png" width="100%" height="80%">
</div>
一个简单的解决方案是使用Flexbox。将容器的CSS定义为：
.container{
display: flex;
justify-content: center;
align-items: center;
align-content: center;
overflow: hidden;
/* Any custom height */
}
将包含的图像宽度调整为100%，您将在容器中获得一个保持尺寸的居中图像。
我看到很多人都建议对象匹配，这是一个不错的选择。但是，如果您希望它也能在较旧的浏览器中工作，还有另一种方法可以轻松实现。
这很简单。我采用的方法是将图像放置在容器内，然后使用组合将其放置在中心：
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
一旦它在中心，我给图像，
// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;
// For horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;
这使图像获得对象拟合的效果：覆盖。
以下是上述逻辑的演示。
https://jsfiddle.net/furqan_694/s3xLe1gp/
此逻辑适用于所有浏览器。
查看我的解决方案：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;
}
