Bootstrap 4左侧带图水平卡片：如何让图片占满高度并裁剪宽度

嘿，我懂你现在的问题——当前图片用width:100%; height:100%;会被强行拉伸填满容器，破坏了图片比例。要实现高度占满父容器、宽度自动裁剪以保持比例的效果，用CSS的object-fit属性就能轻松搞定，这是现代浏览器处理这类图片适配的最优方案。

修改后的完整代码 #

CSS部分：

$nav-red: #e51400;
.card {
  max-width: 540px;
  min-height: 200px;
}
/* 确保左侧图片容器继承卡片的完整高度 */
.col-md-4 {
  height: 100%;
}
.card-image {
  width: 100%;
  height: 100%;
  /* 核心属性：保持图片比例，覆盖整个容器，裁剪超出部分 */
  object-fit: cover;
  /* 可选：自定义图片裁剪的对齐位置，默认是居中 */
  object-position: center;
}
.card-body span{
  background-color: $nav-red !important;
  float: right;
}

HTML部分（无需改动，保持原有结构即可）：

<div class="card mb-3 rounded shadow">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="{{ course.media[0].fileName }}" class="card-image" alt="">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <span class="badge badge-pill badge-danger">{{ course.courseNumber }}</span>
        <h5 class="card-title">{{ course.name }}</h5>
        <p class="card-text">{{ course.description }}</p>
      </div>
    </div>
  </div>
</div>

关键属性解释 #

• object-fit: cover：这是核心，它会让图片按原始比例缩放，直到完全覆盖整个容器区域，超出容器的部分会被自动裁剪，既保证了高度填满父容器，又不会让图片变形。
• object-position: center：可选配置，用来控制图片裁剪时的对齐焦点，比如你想保留图片顶部内容可以改成object-position: top，想保留左侧就用left，默认是居中显示图片的核心区域。
• .col-md-4 加 height:100%：确保左侧图片容器能继承卡片的min-height属性，让图片有足够的高度空间可以填充。

兼容旧浏览器方案（如果需要支持IE11） #

如果你的项目要兼容不支持object-fit的IE11，可以把图片改成容器的背景图：

1. 修改HTML，把img标签换成空的容器：

<div class="col-md-4 card-image-container" style="background-image: url('{{ course.media[0].fileName }}')"></div>

2. 对应CSS：

.card-image-container {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

这样也能达到同样的效果，只是图片不再是<img>标签，可能会影响SEO，所以优先推荐object-fit方案。

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