CSS与Bootstrap环境下图片缩略图尺寸设置失效，如何实现统一显示

问题原因 #

• 你的CSS选择器与实际HTML不匹配：你定义了img.list-group-img的样式，但页面中的图片仅添加了img-thumbnail类，未引入list-group-img类，自定义样式完全没有生效
• height: auto会让高度跟随图片原始比例自适应，只要原图比例不一致，就不可能实现统一尺寸

解决方案 #

1. 给所有需要统一尺寸的图片添加统一类名，修改HTML的img标签代码：

<img class="img-thumbnail list-group-img" src="https://via.placeholder.com/800.jpg" alt="">

2. 替换原有CSS规则，固定宽高并添加比例适配规则避免图片变形：

/* 列表页图片统一尺寸 */
img.list-group-img {
  width: 100%;
  /* 数值可根据你的设计需求调整 */
  height: 200px;
  /* 保持图片原有比例裁剪多余部分，不会出现拉伸变形 */
  object-fit: cover;
  /* 可选：控制裁剪锚点，center代表从图片中心位置裁剪 */
  object-position: center;
}

/* 卡片顶部图片统一尺寸 */
.card-img-top {
  min-height: 0.1px;
  height: 180px;
  object-fit: cover;
  object-position: center;
}

可选适配方案 #

如果不需要裁剪图片，要完整展示所有图片内容，可将object-fit属性值改为contain，会在固定尺寸内等比例缩放图片，多余区域留空，既保证尺寸统一，也不会裁剪或拉伸图片。

内容的提问来源于stack exchange，提问作者Reem Al-Assaf