Bootstrap 5：列内添加图片标题后显示异常，求解决方案

问题背景 #

使用Bootstrap 5实现图片网格布局，通过CSS设置图片宽高100%：

#projects img {
  width: 100%;
  height: 100%;
}

初始HTML结构如下：

<section id="projects">
    <div class="container text-center">
        <h4 class="fw-bold mb-3 border-bottom border-3">Mis Proyectos</h4>
        <div class="row g-4">
            <div class="col-md-6">
                <img
                src="./images/cardcomponent.png" 
                alt="card component"
                class="rounded-3"
                >
            </div>
            <div class="col-md-6">
                <img
                src="./images/yardsale.png" 
                alt="yard sale"
                class="rounded-3"
                >
            </div>
            <div class="col-md-6">
                <img
                src="./images/qrcard.png" 
                alt="web developer"
                class="qr card"
                >
            </div>
            <div class="col-md-6">
              <img
                src="./images/cardcomponent.png" 
                alt="web developer"
                class="rounded-3"
                >
            </div>
        </div>
    </div>
</section>

为每张图片添加<h6>标题后，布局显示异常，修改后的列代码：

<div class="col-md-6">
    <h6>Title</h6>
    <img
    src="./images/cardcomponent.png" 
    alt="card component"
    class="rounded-3"
    >
</div>

解决方案 #

1. 重构列内结构，添加内部容器 #

将标题和图片包裹在一个内部容器中，使用Bootstrap间距类控制标题与图片的距离，保证布局一致性：

<div class="col-md-6">
    <div class="project-item">
        <h6 class="mb-2">项目标题</h6>
        <img src="./images/cardcomponent.png" alt="card component" class="rounded-3">
    </div>
</div>

2. 修正图片样式，避免拉伸变形 #

原CSS中height:100%会让图片强制撑满父容器高度，添加标题后父容器高度变化，导致图片比例失调。修改CSS，用object-fit: cover保持图片比例，也可搭配Bootstrap内置的比例类控制容器宽高比：

方案A：自定义固定高度

#projects .project-item img {
    width: 100%;
    height: 250px;
    object-fit: cover; /* 保持图片比例，裁剪超出部分 */
}

方案B：使用Bootstrap比例类

<div class="col-md-6">
    <div class="project-item">
        <h6 class="mb-2">项目标题</h6>
        <div class="aspect-ratio-4x3">
            <img src="./images/cardcomponent.png" alt="card component" class="rounded-3 w-100 h-100 object-fit-cover">
        </div>
    </div>
</div>

3. 完整修改后的代码 #

CSS部分

#projects .project-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

HTML部分

<section id="projects">
    <div class="container text-center">
        <h4 class="fw-bold mb-3 border-bottom border-3">Mis Proyectos</h4>
        <div class="row g-4">
            <div class="col-md-6">
                <div class="project-item">
                    <h6>Card Component</h6>
                    <img src="./images/cardcomponent.png" alt="card component" class="rounded-3">
                </div>
            </div>
            <div class="col-md-6">
                <div class="project-item">
                    <h6>Yard Sale</h6>
                    <img src="./images/yardsale.png" alt="yard sale" class="rounded-3">
                </div>
            </div>
            <div class="col-md-6">
                <div class="project-item">
                    <h6>QR Card</h6>
                    <img src="./images/qrcard.png" alt="qr card" class="rounded-3">
                </div>
            </div>
            <div class="col-md-6">
                <div class="project-item">
                    <h6>Card Component</h6>
                    <img src="./images/cardcomponent.png" alt="card component" class="rounded-3">
                </div>
            </div>
        </div>
    </div>
</section>

内容的提问来源于stack exchange，提问作者Emiliano Acevedo