Bootstrap中如何让图片高度匹配文本列？附图片尺寸疑问

我在Bootstrap中设置了一个row，包含两列（宽度为col-md-4），希望左侧图片的高度能完全匹配右侧文本列的高度。

当前效果 #

图片高度未填满所在列，与右侧文本列高度不一致，存在空白区域。

预期效果 #

图片高度完全匹配右侧文本列的高度，铺满整个左侧列的可用空间。

相关代码片段 #

CSS代码

.home-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.home-text-justify {
  text-align: justify;
}

HTML代码

<section class="home-featured">
  <div class="row">
    <div class="col-12 col-md-4 offset-md-2">
      <img src="assets/images/Home-section.jpg" alt="Home-section" class="home-image">
    </div>
    <div class="col-md-4 text-start d-flex flex-column justify-content-center">
      <div class="row">
        <div class="col-12 mb-3">
          <h1>Last A Lifetime</h1>
        </div>
      </div>
      <div class="row main-content-description">
        <div class="col-12 mb-3">
          <p class="home-text-justify">A pocket watch is a classic masterpiece made from high quality material that could last a lifetime. Pocket watches are often characterized by their intricate craftsmanship, which may include ornate designs, engravings, or precious materials.</p>
        </div>
      </div>
      <div class="row main-content-brand">
        <div class="col-12">
          <div class="row">
            <div class="col-6 new-home main-content-brand-description">
              <p>Made Of</p>
              <h6 class="home-text my-3">White Crystal</h6>
              <p>From Papua</p>
            </div>
            <div class="col-6 new-home main-content-brand-description">
              <p>Manufactured By</p>
              <h6 class="home-text my-3">Watches</h6>
              <p>For The Best</p>
            </div>
          </div>
        </div>
      </div>
  </div>
</section>

解决方案 #

1. 实现图片与文本列等高铺满

Bootstrap的row默认会让子列等高，但图片所在列需要启用flex布局，才能让内部图片继承100%高度：

• 修改左侧图片列的HTML，添加d-flex类：

<div class="col-12 col-md-4 offset-md-2 d-flex">
  <img src="assets/images/Home-section.jpg" alt="Home-section" class="home-image">
</div>

• 调整.home-image的CSS，将object-fit: contain改为object-fit: cover（图片会铺满容器并保持比例，裁切超出部分；若需完整显示图片，可改用object-fit: fill（会拉伸）或保留contain并给列添加背景色填充空白）：

.home-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 根据需求选择合适的object-fit值 */
}

2. 图片尺寸预处理 vs CSS调整

• 优先预处理图片尺寸：
  • 减少加载体积：避免用户加载过大的原图，提升页面加载速度
  • 保证显示质量：预先调整到接近目标显示尺寸的图片，不会因浏览器过度缩放而模糊
• CSS调整作为补充：
  可以用CSS控制不同屏幕下的显示尺寸，但无法替代图片预处理。推荐配合srcset和<picture>标签，提供不同分辨率的图片实现响应式加载，再用CSS控制显示效果。

内容的提问来源于stack exchange，提问作者David Jansen