图片网格布局问题：已设宽高100%，图片仍未按col容器尺寸自适应

我来帮你搞定这个图片不能铺满col容器的问题！先看看你的代码里可能存在的几个关键点：

问题分析 #

1. Bootstrap列的默认内边距：Bootstrap的.col-*类自带左右padding，这会导致图片即使设置了width:100%，视觉上也没法完全填满列的宽度（因为padding会占用容器空间）。
2. CSS规则冲突：你给图片同时加了.img-fluid和自定义的width:100%; height:100%，而.img-fluid本身已经定义了max-width:100%; height:auto;，强制设置height:100%可能会打乱图片的自适应逻辑，甚至影响宽度的表现。
3. 父容器高度未明确：如果你的.col元素没有设置明确的高度，height:100%对图片来说是无效的，因为它找不到可继承的高度值。

解决方案 #

方案1：调整列的内边距或使用gutter控制间距 #

如果你希望图片完全填满列的视觉空间，可以修改列的padding，或者用Bootstrap的gutter类来统一控制网格间距：

/* 自定义列的内边距，根据需求调整 */
.col-lg-4, .col-md-6, .col-md-12 {
  padding-left: 0;
  padding-right: 0;
}

或者在row上直接使用Bootstrap的gutter类（适合Bootstrap 5+）：

<!-- 修改后的HTML row部分 -->
<div class="row g-0">

方案2：优化图片的CSS规则 #

去掉冲突的高度设置，改用object-fit让图片自适应容器同时保持比例（如果需要填充高度的话）：

.adventure-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 可选：cover裁剪图片填充容器，contain保持完整比例 */
}
/* 给父容器设置明确高度，让图片的height:100%生效 */
.col-lg-4, .col-md-6 {
  height: 100%;
}

方案3：简化样式，依赖Bootstrap的img-fluid #

如果不需要强制图片填满高度，只需要宽度自适应，直接保留.img-fluid即可，去掉自定义的宽高设置：

/* 移除自定义的width和height，只保留必要样式 */
.adventure-card-image {
  /* 可按需添加圆角、阴影等样式 */
}

修改后的完整代码示例 #

.content { padding: 20px 0px; }
.adventure-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.col-lg-4, .col-md-6 {
  height: 100%;
}

<div class="container">
  <div class="content">
    <div class="row g-0"> <!-- 使用g-0去掉网格间距 -->
      <div class="col-lg-4 col-md-12 mb-4">
        <img src="/assets/adventures/resort/resort1.jpg" class="adventure-card-image img-fluid" alt="Resort1">
      </div>
      <div class="col-lg-4 col-md-6 mb-4">
        <img src="/assets/adventures/resort/resort2.jpg" class="adventure-card-image img-fluid mb-4" alt="Resort2">
        <img src="/assets/adventures/resort/resort3.jpg" class="adventure-card-image img-fluid" alt="Resort3">
      </div>
    </div>
  </div>
</div>

你可以根据自己的需求选择其中一种方案，优先试试方案1+方案2，应该就能解决图片占不满容器的问题啦！

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