正如我在2014年Codepen示例中所看到的，我已经制定了一个解决方案，可以在尽可能少的javascript的帮助下处理任何未知的宽度/高度（纵横比）组合，以在容器的纵横比高于/低于图像的纵横比时更改图像居中的CSS：

尝试通过拖动右下角来调整容器大小：

//检测当前图像的窗口宽度是否过窄//并且适合于100%的高度而不是100%的宽度。const photo=文档.images[0]const onPhotoResize=新建ResizeObserver（条目=>window.requestAnimationFrame（checkRatio）)onPhotoResize观察（photo.parentNode）函数checkRatio（）{const photoParent=photo.parentNode，imageAspectRatio=照片客户端宽度/照片客户端高度，parentAspectRatio=photoParent.clientWidth/photoPrent.clientHeightphoto.classList[imageAspectRatio>parentAspectRatio？'add'：'remove']（'max'）}.box格式{宽度：20%；高度：60%；边距：自动；位置：绝对；顶部：0；左：0；右：0；底部：0；调整大小：两者；溢出：隐藏；边框：5px纯红色；} .box>img{位置：绝对；顶部：50%；左：50%；宽度：100%；转换：转换（-50%，-50%）；}.box>img.max｛width:auto；height:100%；｝<div class='box'><img src=“https://upload.wikimedia.org/wikipedia/commons/6/6a/Mona_Lisa.jpg"></div>

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

background-size: cover;

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

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

HTML格式：

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

CSS:

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

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

让它变得简单！

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

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

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

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

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

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

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/

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