CSS实现占满容器宽度、等高且保留宽高比的图片行布局

纯CSS实现方案 #

可以通过flex布局配合CSS自定义属性实现需求，无需JavaScript：

实现逻辑 #

提前拿到每张图片的宽高比（宽/高的计算值），通过CSS计算统一分配每张图片的宽度，即可保证所有图片高度一致、总宽度刚好占满父容器，同时保留原有宽高比。

代码示例 #

HTML结构

<div class="img-row">
  <img src="第一张图片地址" alt="图片1" style="--ar: 1.33;"> <!-- 示例：宽高比4:3，计算值为4/3≈1.33 -->
  <img src="第二张图片地址" alt="图片2" style="--ar: 1;"> <!-- 示例：正方形宽高比1:1 -->
  <img src="第三张图片地址" alt="图片3" style="--ar: 0.75;"> <!-- 示例：宽高比3:4，计算值为3/4=0.75 -->
</div>

CSS样式

.img-row {
  display: flex;
  width: 100%;
  /* 如不需要图片间距可删除gap和calc中的间距计算部分 */
  gap: 20px;
  /* 计算统一高度：(容器总宽度 - 总间距) / 三张图宽高比之和 */
  height: calc((100% - 40px) / (var(--ar1) + var(--ar2) + var(--ar3)));
  /* 三张图片的宽高比也可以统一在父容器定义 */
  --ar1: 1.33;
  --ar2: 1;
  --ar3: 0.75;
}

.img-row img {
  height: 100%;
  aspect-ratio: var(--ar);
  /* 按自身宽高比计算宽度 */
  width: auto;
  flex-shrink: 0;
  /* 不需要裁剪、保留完整图片用contain，允许裁剪铺满区域用cover */
  object-fit: contain;
}

适配说明 #

• 如果调整图片间距，只需要修改gap值，同时同步修改calc里的总间距数值即可（3张图有2个间距，总间距=gap*2）
• 如果父容器宽度不是占满全视口，直接保留100%宽度即可，浏览器会自动基于父容器实际宽度计算高度
• 无需提前固定容器高度，整个布局会跟随父容器宽度自动流体缩放，所有图片始终保持等高、比例不变、总宽度占满父容器

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