如何自动调整大图像的大小，使其适合较小宽度的div容器，同时保持其宽高比？
示例：stackoverflow.com-当图像插入到编辑器面板上，并且图像太大而无法放到页面上时，图像将自动调整大小。
当前回答
下面是一个简单的解决方案（4步修复！！），似乎对我有用。该示例使用宽度来确定整体大小，但也可以翻转宽度以使用高度。
将CSS样式应用于图像容器（例如，<img>）将宽度属性设置为所需的尺寸对于尺寸，使用%表示相对大小或自动缩放（基于图像容器或显示）对静态维度或集合维度使用px（或其他）将高度属性设置为根据宽度自动调整享受！
例如
<img style="width:100%; height:auto;"
src="https://googledrive.com/host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png"
/>
其他回答
所有提供的答案，包括已接受的答案，都只能在假设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的值必须相同。
当图像太小时，Thorn007的公认答案不起作用。
为了解决这个问题，我添加了一个比例因子。这样，它会使图像变大，并填充div容器。
例子：
<div style="width:400px; height:200px;">
<img src="pix.jpg" style="max-width:100px; height:50px; transform:scale(4); transform-origin:left top;" />
</div>
笔记：
对于WebKit，必须添加-WebKit transform:scale（4）-webkit转换原点：左上；在风格上。比例因子为4时，最大宽度=400/4=100，最大高度=200/4=50另一种解决方案是将最大宽度和最大高度设置为25%。这更简单。
事实证明，还有另一种方法可以做到这一点：对象拟合。
<img style='height: 100%; width: 100%; object-fit: contain'/>
将完成工作。当然，不要忘记包含其他必要的属性，如src和alt。
小提琴：http://jsfiddle.net/mbHB4/7364/
让它变得简单！
给容器一个固定的高度，然后为容器内的img标记设置宽度和最大高度。
<div style="height: 250px">
<img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>
不同的是，您将宽度设置为100%，而不是最大宽度。
本文可能会帮助您：
.方形{位置：相对；宽度：300px；高度：300px；溢出：隐藏；}国际货币基金组织{位置：绝对；最大宽度：100%；宽度：100%；高度：自动；顶部：50%；左：50%；转换：转换（-50%，-50%）；}img.景观{高度：100%；宽度：自动；}<div class=“square”><img src=“https://unsplash.it/400/500“alt=”图像“/></div><div class=“square”><img src=“https://unsplash.it/500/400“class=”landscape“alt=”图像“/></div>
简单的CSS解决方案：如何将不同尺寸的图像放在集合容器中（2017-05-01）
.方形{位置：相对；宽度：441px；高度：200px；溢出：隐藏；边框：1px实心黑色；}国际货币基金组织{最大宽度：100%；/*宽度：100%*/<----它拉伸图像并适合父对象高度：自动；/*转换：转换（-50%，-50%）*/<-----设置垂直和水平中心}img.景观{高度：100%；宽度：自动；}<div class=“square”><img src=“https://cdn.pixabay.com/photo/2020/08/28/12/32/man-5524488__340.jpg“alt=”图像“/></div>
