如何自动调整大图像的大小，使其适合较小宽度的div容器，同时保持其宽高比？
示例：stackoverflow.com-当图像插入到编辑器面板上，并且图像太大而无法放到页面上时，图像将自动调整大小。
当前回答
让它变得简单！
给容器一个固定的高度，然后为容器内的img标记设置宽度和最大高度。
<div style="height: 250px">
<img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>
不同的是，您将宽度设置为100%，而不是最大宽度。
其他回答
我以这种方式在超链接内水平和垂直居中并按比例缩放图像：
#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 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;
}
我看到很多人都建议对象匹配，这是一个不错的选择。但是，如果您希望它也能在较旧的浏览器中工作，还有另一种方法可以轻松实现。
这很简单。我采用的方法是将图像放置在容器内，然后使用组合将其放置在中心：
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/
此逻辑适用于所有浏览器。
检查我的答案，使图像响应-最简单的方法-
img{
width: 100%;
max-width: 800px;
}
目前，对于固定大小的图像（如JPEG或PNG文件），无法以确定性的方式正确执行此操作。
要按比例调整图像大小，必须将高度或宽度设置为“100%”，但不能同时设置两者。如果将两者都设置为“100%”，则图像将被拉伸。
选择高度还是宽度取决于图像和容器尺寸：
如果您的图像和容器都是“肖像形状”或“风景形状”（分别比它们宽或宽），那么高度和宽度中的哪一个都是“%100”并不重要。如果图像是纵向的，而容器是横向的，则必须在图像上设置height=“100%”。如果图像是横向的，而容器是纵向的，则必须在图像上设置width=“100%”。
如果您的图像是SVG，这是一种可变大小的矢量图像格式，则可以自动展开以适应容器。
您只需确保SVG文件中没有在<SVG>标记中设置这些财产：
height
width
viewbox
大多数矢量绘图程序在导出SVG文件时都会设置这些财产，因此每次导出时都必须手动编辑文件，或者编写脚本来进行编辑。
