让它变得简单！

给容器一个固定的高度，然后为容器内的img标记设置宽度和最大高度。

<div style="height: 250px">
     <img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>

不同的是，您将宽度设置为100%，而不是最大宽度。

将图像所需的高度和宽度提供给包含＜img＞标记的div。不要忘记在正确的样式标记中给出高度/宽度。

在＜img＞标记中，将最大高度和最大宽度设置为100%。

<div style="height:750px; width:700px;">
    <img alt="That Image" style="max-height:100%; max-width:100%;" src="">
</div>

正确后，可以在适当的类中添加详细信息。

我看到很多人都建议对象匹配，这是一个不错的选择。但是，如果您希望它也能在较旧的浏览器中工作，还有另一种方法可以轻松实现。

这很简单。我采用的方法是将图像放置在容器内，然后使用组合将其放置在中心：

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/

此逻辑适用于所有浏览器。

我有更好的解决方案，不需要任何JavaScript。它反应灵敏，我经常使用它。通常需要将任何纵横比的图像与具有指定纵横比的容器元素相匹配。必须让这一切都能完全响应。

/*仅用于此演示*/.容器{最大宽度：300px；边距：0自动；}.img框架{方框阴影：3px 3px 6px rgba（0，0，0、.15）；背景：#ee0；边距：20px自动；}/*这适用于具有指定纵横比的响应容器*/.纵横比{位置：相对；}.方面-1-1{填充底部：100%；}.方面-4-3{填料底部：75%；}方面-16-9{垫底：56.25%；}/*这是关键部分-定位并将图像适配到容器*/.fit img{位置：绝对；顶部：0；右：0；底部：0；左：0；边距：自动；最大宽度：80%；最大高度：90%}.fit img底部{顶部：自动；}.紧密贴合{最大宽度：100%；最大高度：100%}<div class=“container”><div class=“纵横比aspect-ratio-1-1 img帧”><img src=“https://via.placeholder.com/400x300“class=”fit img“alt=”sample“></div><div class=“纵横比aspect-ratio-4-3 img帧”><img src=“https://via.placeholder.com/400x300“class=”fit img fit img tight“alt=”sample“></div><div class=“纵横比aspect-ratio-16-9 img帧”><img src=“https://via.placeholder.com/400x400“class=”fit img“alt=”sample“></div><div class=“纵横比aspect-ratio-16-9 img帧”><img src=“https://via.placeholder.com/300x400“class=”fit img fit img bottom“alt=”sample“></div></div>

您可以独立设置最大宽度和最大高度；图像将遵循最小的图像（取决于图像的值和纵横比）。您还可以将图像设置为按需对齐（例如，对于无限白色背景上的产品图片，您可以轻松地将其定位到中心底部）。

查看我的解决方案：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;
}

您可以将图像设置为div的背景，然后使用CSS background size属性：

background-size: cover;

它将“将背景图像缩放到尽可能大，以使背景区域完全被背景图像覆盖。背景图像的某些部分可能在背景定位区域内看不见”--W3Schools