Flexbox布局中不同尺寸图片保持原始宽高比的方法

你现有代码无法实现需求的核心问题是给所有li设置了统一的flex: 1 1 0规则，这会强制所有列表项均分容器总宽度，完全忽略每张图片自身的宽高比，最终要么图片被挤压变形，要么无法统一高度撑满整行。
同类方案仅适配同宽高比图片，本质也是因为默认所有flex项伸缩比例一致，只有图片本身宽高比完全相同时才不会出现显示异常。

核心逻辑是让每个列表项的伸缩比例和对应图片的宽高比匹配，这样分配给每个项的宽度刚好能容纳同高状态下的原图比例，从根源上避免变形，同时所有项宽度加总后刚好撑满整行。

完整代码 #

CSS 样式 #

ul {
  width: 100%;
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: stretch;
  /* 如需图片之间留间距，可加gap属性，比如gap: 4px; */
}

li {
  /* 核心：flex-grow取值为对应图片的宽/高比值，flex-basis设为0 */
  flex: var(--img-ratio) 1 0;
  min-width: 0; /* 避免图片固有尺寸撑破flex收缩规则 */
}

/* 示例中三张图的宽高比分别对应：1920/1080≈1.78、1400/1000=1.4、500/500=1 */
li:nth-child(1) { --img-ratio: 1.78; }
li:nth-child(2) { --img-ratio: 1.4; }
li:nth-child(3) { --img-ratio: 1; }

img {
  width: 100%;
  height: 100%;
  display: block; /* 清除行内元素默认下方间隙 */
  object-fit: cover;
}

HTML 结构 #

<ul>
  <li>
    <img src="https://dummyimage.com/1920x1080"/>
  </li>
  <li>
    <img src="https://dummyimage.com/1400x1000"/>
  </li>
  <li>
    <img src="https://dummyimage.com/500"/>
  </li>
</ul>

动态尺寸图片适配 #

如果你的图片是动态加载、尺寸不固定，不需要手动写死CSS变量，加少量JS在图片加载完成后自动计算比例即可，适配任意尺寸的图片：

document.querySelectorAll('ul img').forEach(img => {
  img.addEventListener('load', () => {
    const ratio = img.naturalWidth / img.naturalHeight;
    img.parentElement.style.setProperty('--img-ratio', ratio);
  })
})

效果说明 #

• 整行图片始终占满容器100%宽度，无多余留白
• 所有图片高度自动保持一致，无高低差
• 每张图片严格维持自身原始宽高比，不会出现拉伸变形

如果需要完整显示图片内容不被裁剪，把img的object-fit属性值改为contain即可；如果需要图片铺满区域不留白，保持cover即可。

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