CSS如何实现不同宽高比图片等高水平排列且占满整行容器宽度

方案1：纯CSS实现（最优，无运行时性能损耗，适合数千行场景） #

该方案仅需在HTML输出阶段提前获取每张图片的原始宽高，注入宽高比自定义属性即可，全程无JS运行时开销，不会出现抖动问题。

实现代码 #

CSS部分：

.img-row {
  display: flex;
  width: 100%;
  gap: 0; /* 如需图片间距可直接调整该值，会自动适配计算逻辑 */
}
.img-row img {
  flex-grow: var(--ar);
  flex-shrink: 1;
  flex-basis: 0;
  width: 0; /* 兼容低版本浏览器 */
  height: auto;
  object-fit: contain; /* 强制保持原始比例，避免拉伸 */
}

HTML部分（修改后）：

<div class="img-row">
  <!-- --ar值为 图片原始宽度/图片原始高度 的计算结果 -->
  <img src='img1.jpg' style="--ar: 1.33;" alt="示例图1">
  <img src='img2.jpg' style="--ar: 1.5;" alt="示例图2">
  <img src='img3.jpg' style="--ar: 0.75;" alt="示例图3">
  <img src='img4.jpg' style="--ar: 1.77;" alt="示例图4">
  <img src='img5.jpg' style="--ar: 1.0;" alt="示例图5">
</div>

实现原理 #

所有图片的flex-grow值为自身宽高比，总分配权重为行内所有图片宽高比之和，每张图片分配的宽度与自身宽高比成正比，最终所有图片高度自动统一，总宽度刚好撑满父容器，完全满足不变形、不裁剪、不重叠的要求。

方案2：轻量JS实现（无需提前获取图片宽高） #

如果无法在HTML输出阶段拿到图片原始尺寸，可以用该优化后的JS方案，解决传统JS实现的抖动、性能差问题。

优化点 #

• 先批量读取尺寸再统一更新样式，避免边读边写导致的多次重排
• 用requestAnimationFrame处理样式更新，避免视觉抖动
• 支持窗口 resize 防抖重算，性能开销极低

实现代码 #

基础CSS：

.img-row {
  display: flex;
  width: 100%;
  gap: 0;
  margin: 8px 0;
}
.img-row img {
  display: block;
  height: 100%;
  width: auto;
}

JS部分：

function calcAllRowsHeight() {
  const rows = document.querySelectorAll('.img-row');
  const updates = [];
  // 先批量读取所有需要的尺寸，不修改DOM，避免重排
  rows.forEach(row => {
    const imgs = row.querySelectorAll('img');
    let totalAr = 0;
    imgs.forEach(img => {
      // 读取图片原始尺寸，不受页面缩放影响
      const ar = img.naturalWidth / img.naturalHeight;
      totalAr += ar;
    });
    const rowHeight = row.clientWidth / totalAr;
    updates.push({ row, height: rowHeight });
  });
  // 一次性更新所有行高，仅触发一次重排
  requestAnimationFrame(() => {
    updates.forEach(({ row, height }) => {
      row.style.height = `${height}px`;
    });
  });
}

// 页面所有资源加载完成后计算
window.addEventListener('load', calcAllRowsHeight);
// 窗口大小变化时防抖重算
let resizeTimer = null;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(calcAllRowsHeight, 100);
});

如果使用图片懒加载，可在单张图片加载完成后仅触发对应行的重算，无需全量更新，性能更好。

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