正如我在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>

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

HTML格式：

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

CSS:

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

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

下面是一个简单的解决方案（4步修复！！），似乎对我有用。该示例使用宽度来确定整体大小，但也可以翻转宽度以使用高度。

将CSS样式应用于图像容器（例如，<img>）将宽度属性设置为所需的尺寸对于尺寸，使用%表示相对大小或自动缩放（基于图像容器或显示）对静态维度或集合维度使用px（或其他）将高度属性设置为根据宽度自动调整享受！

例如

<img style="width:100%; height:auto;"
    src="https://googledrive.com/host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png"
/>

您必须告诉浏览器您放置它的高度：

.example {
    height: 220px; /* DEFINE HEIGHT */
    background: url('../img/example.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

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

img {
    max-height: 75vh;
}

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

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

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/

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