无固定宽高场景下如何让卡片内不同尺寸图片保持等高

解决方案 #

共有两种适配你需求的实现方案，均不需要提前预知图片尺寸、文本长度，也不用固定像素值限制尺寸：

方案1：纯CSS Grid方案（同行动态等高，推荐） #

依赖原生CSS布局能力，无需额外脚本，适配同行动态内容等高场景：

• 第一步：给所有卡片的外层包裹容器添加Grid布局配置：

.card-wrapper {
  display: grid;
  /* 可根据响应式需求调整列数，示例为3列布局 */
  grid-template-columns: repeat(3, 1fr);
  /* 开启同行动态等高 */
  align-items: stretch;
  gap: 16px;
}

• 第二步：新增卡片图片区域的样式规则：

.card .img-container {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 避免图片区域被下方文本挤压高度 */
  flex-shrink: 0;
}
.card .img-container img {
  max-height: 100%;
  width: auto;
  /* 保证图片不变形 */
  object-fit: contain;
}

• 第三步：修改你现有HTML的图片外层div，新增img-container类即可，原有Flex布局逻辑保持不变即可实现：同一行所有卡片高度自动对齐最高卡片的高度，图片区域等高，图片不会被压缩变形，按钮统一对齐在卡片底部。

方案2：JS动态适配方案（跨行等高场景） #

如果需要所有卡片跨行统一图片高度，可使用JS脚本实现：

// 所有资源加载完成后计算高度
window.addEventListener('load', () => {
  const cardImgs = document.querySelectorAll('.card .img-container img')
  let maxImgHeight = 0
  // 遍历获取所有图片的最大高度
  cardImgs.forEach(img => {
    if (img.offsetHeight > maxImgHeight) maxImgHeight = img.offsetHeight
  })
  // 统一给所有图片容器赋值高度
  document.querySelectorAll('.card .img-container').forEach(el => {
    el.style.height = `${maxImgHeight}px`
  })
})

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