当图像太小时，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%。这更简单。

这是我的解决方案。您需要将图片插入两次。但它不使用js，img将调整为宽度和高度。您可以单击“运行代码片段-完整页面”，打开开发控制台并调整窗口宽度以查看响应效果。/*响应宽度*/.响应宽度{背景：lightsalmon；高度：100px；宽度：50%；}/*Widthlimit公司*/.最大宽度{背景：海军；高度：200px；宽度：100px；}.div1{最大高度：100%；位置：相对；框大小：内容框；/*中心：*/顶部：50%；变换：translateY（-50%）；}.边缘{高度：自动；最大宽度：100%；不透明度：0；}.div2{高度：100%；宽度：配合内容；位置：绝对；顶部：0；/*中心：*/左：50%；变换：translateX（-50%）；}.mainimg{最大高度：100%；最大宽度：100%；}<div class=“responsivewidth”><div class=“div1”><img class=“margerimag”src=“https://via.placeholder.com/2000x1500" /><div class=“div2”><img class=“mainimg”src=“https://via.placeholder.com/2000x1500" /></div></div></div><div class=“maxedbywidth”><div class=“div1”><img class=“margerimag”src=“https://via.placeholder.com/2000x1500" /><div class=“div2”><img class=“mainimg”src=“https://via.placeholder.com/2000x1500" /></div></div></div>

这里有一个解决方案，即使提供的图像太小或太大，无法容纳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;
}

本文可能会帮助您：

.方形{位置：相对；宽度：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>

有两种方法可以使图像具有响应性。

当图像是背景图像时。#集装箱{宽度：300px；高度：300px；背景图像：url(https://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg);背景尺寸：封面；背景重复：无重复；背景位置：中心；}＜div id=“container”＞＜div＞在这里运行但是应该使用img标记来放置图像，因为它在SEO方面比背景图像更好，因为您可以在img标记的alt中写入关键字。因此，您可以使图像具有响应性。当图像在img标记中时。#集装箱{最大宽度：400px；溢出：隐藏；}国际货币基金组织{宽度：100%；对象拟合：包含；}<div id=“container”><img src=“https://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg“alt=”your_keyword“/>＜div＞在这里运行