Html 如何在一组容器中调整不同大小的图像| CSS

我正在尝试构建一个图像聚焦页面，所有图像在固定大小的容器中灵活调整大小。集装箱分两排放置；第一行是三个4间距的列，每个列带有一个图像（在引导之后），第二行是一个12间距的列，其中填充了一个图像

理想情况下，我希望他们表现出这种行为： -如果它们比容器宽，我希望调整图像的大小并居中，直到图像边框在高度或宽度上与容器相交。任何相应的溢出都将被切断

溢流已经切断了它们；对齐自我，使其居中；对象匹配覆盖图像；但我不知道如何让它按照我上面描述的方式运行

非常感谢您阅读了本文，如果您愿意帮助我，我将更加感谢您^^

代码：

.img响应{
宽度：自动；
左边距：自动；
右边距：自动；
显示：块；
位置：相对位置；
自对准：居中；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
对象匹配：覆盖；
}
.col-4{
最小高度：20px；
最大高度：300px；
填充：0；
溢出：隐藏；
}
上校12{
最小高度：150px；
最大高度：300px；
填充：0；
溢出：隐藏；
}

---

已解决！感谢@Kangouroops

增加

---

为什么不

对象匹配：包含；宽度：100%；身高：100%？有效！非常感谢！是否已将其更改为“适合对象：封面”^^我很高兴它有所帮助。您可以在此处阅读有关
背景大小的文档：
contain
意味着它将
在不裁剪或拉伸图像的情况下尽可能地缩放图像。
object-fit: contain;
width: 100%;
height: 100%;