Bootstrap两列布局中，如何让图片铺满首屏且完全填充右侧列？

我使用Bootstrap创建了一个包含两列的div，尝试将上图中的图片放置在右侧列中，使其仅显示到首屏范围。我尝试了以下代码：

img {
  height: 100vh;
  object-fit: cover;
}

上述代码能让图片仅显示到首屏，但即便使用了CSS属性object-fit: cover，图片也无法完全填充右侧列。请问该如何解决？我希望无论图片尺寸如何，都能让它完全填充右侧列。

要让图片完全填充右侧列，需要从布局和样式两方面调整：

具体实现方案 #

调整HTML布局（优化Bootstrap类）

<!-- 用container-fluid清除容器默认边距，row加g-0消除列间距 -->
<div class="container-fluid p-0">
  <div class="row g-0">
    <div class="col">
      <!-- 左侧列内容 -->
    </div>
    <!-- 右侧列加p-0清除默认内边距 -->
    <div class="col p-0">
      <img src="你的图片地址" alt="项目图片" class="full-screen-img">
    </div>
  </div>
</div>

编写CSS样式

.full-screen-img {
  width: 100%; /* 强制图片宽度填满父容器 */
  height: 100vh; /* 高度占满首屏 */
  object-fit: cover; /* 保持图片比例并填满容器，裁剪超出部分 */
}

关键说明 #

1. 你之前只设置了图片高度，未指定width: 100%，图片会维持自身宽高比，导致宽度无法填满列容器。
2. Bootstrap的col默认带有内边距，p-0类可以清除这个间隙，避免图片和列边缘出现留白。
3. row g-0会消除列之间的默认 gutter（间距），确保右侧列的宽度是预期的布局宽度，让图片能完全填充。

这样调整后，无论原图尺寸如何，都能让图片填满右侧首屏区域，同时保持图片比例不变。

内容的提问来源于stack exchange，提问作者Mohit Tembhurkar