html - Bootstrap 网格系统填充图像

Question

我正在尝试创建一个分为 2 个嵌套列的列。它们都应该是覆盖其相关列的整个高度和宽度的图像。但是，出于某种原因，图像会覆盖包含它们的 div。

<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
        <img class="fitimages" src="./images/pic1.jpg">
    </div>
    <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
        <img class="fitimages" src="./images/pic2.jpg">
    </div>

 .fitimages{
max-width: 100%;
max-height: 100%;

}

我使用了 max-width 和 max-height 以便它们围绕父 div 但由于某种原因，左边的图像没有填满整个宽度和高度，而右边的图像超过了它。

Answer 1

给你的 img 这样的风格:object-fit: cover;