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

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

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

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

与这里的一些答案非常相似，但在我的案例中，我的图像有时更高，有时更大。

这种风格就像一种魅力，确保所有图像都使用所有可用空间，保持比例而不是剪切：

.img {
   object-fit: contain;
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
}

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

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

最佳实践（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%。

这里有一个解决方案：

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

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

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

如果应用程序可以具有任何纵横比或分辨率的图像，则可以像此链接中那样管理高度和宽度。

这使用Javascript和HTML

https://stackoverflow.com/a/65090175/13338731

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

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

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

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