Bootstrap 4卡片头部图片：固定最大高度且不缩放宽度的实现

嗨，我懂你遇到的这个困扰了——用户上传的图片尺寸五花八门，想让卡片顶部的图片固定最大高度120px，同时不让宽度缩放、允许裁剪多余部分，但之前的CSS设置总是让浏览器自动缩放宽度，效果不稳定。其实用CSS的object-fit属性就能完美解决这个问题，下面给你具体的实现方案：

问题根源 #

你之前设置的.cardimg { max-height: 120px; width: auto; }之所以没达到预期，是因为浏览器默认会保持图片的宽高比，自动缩放图片来适应你设置的最大高度，这就导致宽度跟着变了，没法实现裁剪效果。

正确的CSS样式 #

替换成下面的样式就可以了：

.cardimg {
  max-height: 120px;
  width: 100%;
  object-fit: cover;
  /* 可选：控制裁剪区域，默认是居中，你可以根据需求调整 */
  object-position: center;
}

各属性作用说明：

• width: 100%：让图片宽度完全匹配卡片的宽度，避免宽度自适应带来的不稳定，确保图片填满卡片头部的横向空间。
• object-fit: cover：这是核心！它会保持图片的原始宽高比，同时缩放图片让它完全覆盖高度120px、宽度100%的容器区域，超出的部分会被自动裁剪，刚好符合你“允许裁剪、不缩放宽度”的需求。
• object-position：如果想让图片裁剪时优先显示特定区域（比如顶部人物头像、底部风景），可以修改这个值，比如object-position: top会保留图片顶部区域，裁剪底部；object-position: bottom则相反。

保持原HTML结构不变 #

你的HTML结构不需要调整，还是原来的样子就行：

<div class="card">
  <img src="用户上传的图片地址" class="card-img-top cardimg">
  <div class="card-body">
    <!-- 你的卡片内容 -->
  </div>
</div>

兼容性说明 #

object-fit在现代主流浏览器（Chrome、Firefox、Edge、Safari 10+）都能正常工作，Bootstrap 4的目标浏览器范围完全覆盖这些，所以不用担心兼容性问题。

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