Bootstrap 5图片网格中右下角图片无法填满div的问题求助

目标实现的图片网格效果：

我使用Bootstrap 5构建该网格的代码如下：

现有代码 #

CSS #

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

HTML #

<section>
    <div class="container" id="project_images">
        <div class="row gy-3 gy-lg-4">
            <div class="col-12">
                <div class="row gx-3 gy-3 gx-lg-4 gy-lg-4">
                    <div class="col-12 col-md-7"><img class="img-fluid" src="assets/img/Geotar_1.jpg"></div>
                    <div class="col-12 col-md-5"><img class="img-fluid" src="assets/img/Geotar_2.jpg"></div>
                </div>
            </div>
            <div class="col-12">
                <div class="row gx-3 gy-3 gx-lg-4">
                    <div class="col"><img class="img-fluid" src="assets/img/Geotar_3.jpg"></div>
                    <div class="col-md-4">
                        <div class="row gx-0 gy-3 gy-lg-4">
                            <div class="col-12"><img class="img-fluid" src="assets/img/Geotar_4.jpg"></div>
                            <div class="col-12"><img class="img-fluid" src="assets/img/Geotar_5.jpg"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

所有图片尺寸各不相同，大部分图片可通过上述CSS规则适配容器，但右下角的Geotar_5.jpg无法填满容器高度，出现台阶状空隙：

解决方案 #

问题根源是右侧包含两张图片的列没有被完全撑开，导致内部图片容器高度不足。以下是几种可行的解决方法：

方法1：利用Bootstrap Flex工具类强制高度匹配 #

1. 给包含Geotar_3和右侧列的外层row添加align-items-stretch，确保两列高度一致：

<div class="row gx-3 gy-3 gx-lg-4 align-items-stretch">

2. 给右侧内部的row添加h-100让它占满父容器高度，同时给两个图片容器添加h-50平分高度（注意调整间距类避免溢出）：

<div class="col-md-4">
    <div class="row gx-0 gy-3 gy-lg-4 h-100">
        <div class="col-12 h-50 mb-3 mb-lg-4"><img class="img-fluid h-100 w-100 object-fit-cover" src="assets/img/Geotar_4.jpg"></div>
        <div class="col-12 h-50"><img class="img-fluid h-100 w-100 object-fit-cover" src="assets/img/Geotar_5.jpg"></div>
    </div>
</div>

提示：Bootstrap 5自带object-fit-cover工具类，可直接替换自定义CSS规则，简化代码。

方法2：自定义CSS实现高度填充 #

给右侧列添加自定义类，通过Flex布局强制内部元素填满高度：

.right-image-column {
    height: 100%;
}
.right-image-column .row {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.right-image-column .row .col-12 {
    flex: 1;
}

然后在HTML中给右侧列添加该类：

<div class="col-md-4 right-image-column">
    <div class="row gx-0 gy-3 gy-lg-4">
        <div class="col-12"><img class="img-fluid h-100 w-100 object-fit-cover" src="assets/img/Geotar_4.jpg"></div>
        <div class="col-12"><img class="img-fluid h-100 w-100 object-fit-cover" src="assets/img/Geotar_5.jpg"></div>
    </div>
</div>

方法3：简化结构用Flex垂直排列 #

去掉右侧内部的row，直接用Bootstrap的flex工具类让两张图片垂直排列并填充高度：

<div class="row gx-3 gy-3 gx-lg-4 align-items-stretch">
    <div class="col"><img class="img-fluid h-100 w-100 object-fit-cover" src="assets/img/Geotar_3.jpg"></div>
    <div class="col-md-4 d-flex flex-column">
        <img class="img-fluid mb-3 mb-lg-4 flex-grow-1 object-fit-cover" src="assets/img/Geotar_4.jpg">
        <img class="img-fluid flex-grow-1 object-fit-cover" src="assets/img/Geotar_5.jpg">
    </div>
</div>

内容的提问来源于stack exchange，提问作者Nikita Pelevin