可以使用纵横比属性css

.my-image {
 aspect-ratio: 1/1; // square
 aspect-ratio: 16/9; // wide screen 1080p
 aspect-ratio: 4/3;
 aspect-ratio: 2/3;
}

这里有一个解决方案：

object-fit: cover;
width: 100%;
height: 250px;

您可以调整宽度和高度以满足您的需要，对象拟合属性将为您进行裁剪。

有关对象拟合属性和兼容性表的可能值的更多信息，请参见：https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

国际货币基金组织{最大宽度：80px；/*也适用于百分比值，如100%*/高度：自动；}<p>此图像最初为400x400像素，但应通过CSS调整大小：</p><img width=“400”height=“400”src=“https://i.stack.imgur.com/aEEkn.png"><p>假设HTML的作者故意想要高度为宽度值的一半，此CSS将忽略HTML作者的愿望，这可能是您想要的，也可能不是您想要的：</p><img width=“400”height=“200”src=“https://i.stack.imgur.com/aEEkn.png">

下面的解决方案将允许图像的放大和缩小，具体取决于父框的宽度。

所有图像都有一个固定宽度的父容器，仅用于演示。在生产中，这将是父框的宽度。

最佳实践（2018）：

此解决方案告诉浏览器以最大可用宽度渲染图像，并以该宽度的百分比调整高度。

.父级{宽度：100px；}国际货币基金组织{显示：块；宽度：100%；高度：自动；}<p>此图像最初为400x400像素，但应通过CSS调整大小：</p><div class=“parent”><img width=“400”height=“400”src=“https://placehold.it/400x400"></div>

更新颖的解决方案：

使用更高级的解决方案，无论图像大小如何，您都可以裁剪图像，并添加背景色来补偿裁剪。

.父级{宽度：100px；}.容器{显示：块；宽度：100%；高度：自动；位置：相对；溢出：隐藏；填充：34.37%0 0；/*34.37%=100/（w/w）=100/*/}.容器img{显示：块；最大宽度：100%；最大高度：100%；位置：绝对；顶部：0；底部：0；左：0；右：0；}<p>此图像最初为640x220，但应通过CSS调整大小：</p><div class=“parent”><div class=“container”><img width=“640”height=“220”src=“https://placehold.it/640x220"></div></div>

对于指定填充的行，需要计算图像的纵横比，例如：

640px (w) = 100%
220px (h) = ?

640/220 = 2.909
100/2.909 = 34.37%

因此，顶部填充=34.37%。

将图像容器标记的CSS类设置为图像类：

<div class="image-full"></div>

并将其添加到CSS样式表中。

.image-full {
    background: url(...some image...) no-repeat;
    background-size: cover;
    background-position: center center;
}

这里有一个解决方案：

img {
   width: 100%;
   height: auto;
   object-fit: cover;
}

这将确保图像始终覆盖整个父对象（向下和向上缩放）并保持相同的纵横比。