使用宽高比填充图像的div

考虑使用CSS object-fit属性。

5.5。调整对象大小：object-fit 属性

该object-fit属性指定如何将替换元素的内容装配到通过其使用的高度和宽度建立的框中。

这是两个值：

cover

确定替换内容的大小，以在填充元素的整个内容框时保持其长宽比。

contain

替换后的内容的大小可保持其纵横比，同时适合元素的内容框。

因此，cover图像将保留其纵横比并覆盖所有可用空间。当然，这意味着很多图像可能会在屏幕外裁剪。

随着contain纵横比也保持，但图像进行缩放以适应箱内。这意味着图像的左右两侧或顶部和底部可能会有空白。