本文可能会帮助您：

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

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

此解决方案不会拉伸图像并填充整个容器，但会剪切部分图像。

HTML格式：

 <div><img src="/images/image.png"></div>

CSS:

div {
    width: 100%;
    height: 10em;
    overflow: hidden;

img {
    min-width: 100%;
    min-height: 100%;
}

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

当图像是背景图像时。#集装箱{宽度：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＞在这里运行

我以这种方式在超链接内水平和垂直居中并按比例缩放图像：

#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中进行了测试。

有关居中的更多信息，请参阅此处。

正如这里所回答的，你也可以使用vh单位而不是最大高度：如果它在你的浏览器（如Chrome）上不起作用，100%：

img {
    max-height: 75vh;
}