使用CSS、Bootstrap实现HTML页面同一行响应式图片尺寸统一

解决方案 #

核心思路是给所有缩略图套一个统一比例的固定容器，强制图片按容器尺寸裁剪填充，避免原图比例影响布局高度。

方法1：使用aspect-ratio实现（现代浏览器首选） #

新增CSS样式：

/* 给图片外层的a标签设置统一比例容器 */
.portfolio-link {
  display: block;
  width: 100%;
  /* 可按需求调整比例：4:3填4/3、1:1填1/1、16:9填16/9 */
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
}

/* 调整缩略图的填充方式 */
.portfolio-link .img-fluid {
  width: 100%;
  height: 100%;
  /* cover保持图片比例裁剪多余部分，需显示完整图片可换成contain */
  object-fit: cover;
  /* 居中裁剪，可根据需求调整对齐位置 */
  object-position: center;
}

参数说明：

• 调整aspect-ratio的数值即可修改所有缩略图的统一比例
• 若选object-fit: contain显示完整图片，可给.portfolio-link加背景色填充空白区域

方法2：兼容老浏览器的padding方案 #

如果需要兼容IE等不支持aspect-ratio的旧版本浏览器，可使用padding撑开固定比例容器：

.portfolio-link {
  display: block;
  width: 100%;
  position: relative;
  /* 4:3比例填75%、16:9填56.25%、1:1填100% */
  padding-top: 75%;
  overflow: hidden;
}

.portfolio-link .img-fluid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

额外对齐优化 #

如果底部标题文字行数不同导致错位，可给标题区设置最小高度：

.portfolio-caption {
  min-height: 80px; /* 按实际文字大小调整数值 */
  padding: 1rem;
}

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