如何让网格首行左侧图片占满整行高度（Vue+Bootstrap）

我用Vue.js和Bootstrap类做样式，没用到内联样式，现在想让网格首行（row1）的左侧图片和相邻div一样占满整行高度，期望效果是图片填满所在容器的高度。相关代码如下（只需要关注row1部分，忽略row2）：

<div class="container justify-content-center">
  <heading
    :heading-text="title"
    :view-all="viewAllText"
    :view-all-link="viewAllLink"
  />
  <!-- row1 -->
  <div class="row row-cols-2 justify-content-center align-items-center">
    <div
      v-for="(banner, index) in gridCollection.slice(2, 4)"
      :key="index"
      class=" p-1 px-2"
      :class="`col-${4*(index+1)}`"
    >
      <fdk-link :link="`/collection/${banner.name}`">
        <img
          class="img-fluid object-fit-contain rounded-3"
          :src="banner.image.landscape"
          alt="Image"
        />
      </fdk-link>
    </div>
  </div>
  <!-- row2 -->
  <div class="row row-cols-3 justify-content-center align-items-center">
    <div
      v-for="(banner, index) in gridCollection.slice(3, 6)"
      :key="index"
      class="col p-1 px-2"
    >
      <fdk-link :link="`/collection/${banner.name}`">
          <img
          class="img-fluid object-fit-contain rounded-3"
          :src="banner.image.landscape"
          alt="Image"
        />
      </fdk-link>
    </div>
  </div>
</div>

解决方法 #

要实现图片占满容器高度，按以下步骤调整即可：

• 修改行的对齐方式：把row1的align-items-center换成align-items-stretch，这样列会自动拉伸到行的全高，而非居中对齐。
• 给容器、链接、图片添满高类：给v-for循环的div、fdk-link、img都加上h-100类，让它们依次占满父级的高度。
• 调整图片的适配模式：把图片的object-fit-contain改成object-fit-cover（保持比例裁剪多余部分），如果不想裁剪可以用object-fit-fill（拉伸填满，可能变形），前者视觉效果更自然。

修改后的row1代码：

<!-- row1 -->
<div class="row row-cols-2 justify-content-center align-items-stretch">
  <div
    v-for="(banner, index) in gridCollection.slice(2, 4)"
    :key="index"
    class="p-1 px-2 h-100"
    :class="`col-${4*(index+1)}`"
  >
    <fdk-link :link="`/collection/${banner.name}`" class="d-block h-100">
      <img
        class="img-fluid h-100 object-fit-cover rounded-3"
        :src="banner.image.landscape"
        alt="Image"
      />
    </fdk-link>
  </div>
</div>

简单解释：

• align-items-stretch是Bootstrap自带类，强制行内所有列高度一致
• h-100让元素占满父级100%高度，从容器到链接再到图片，一层一层拉满
• object-fit-cover保证图片比例不变，同时填满容器，不会留下空白区域

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