如何在任意分辨率下将10张4:3比例图片无间距放入全屏宽度行

核心思路是通过Flex平分宽度，配合aspect-ratio属性固定宽高比，不需要手动写死容器高度，即可实现10张无间距图片铺满全屏、保持4:3比例的效果。

修正后代码 #

CSS部分 #

ul {
  width: 100%;
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
  flex-wrap: nowrap;
}

li {
  flex: 0 0 10%;
  list-style: none;
}

img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  vertical-align: middle;
}

HTML部分 #

<div style="width:100vw;border:1px solid red;">
  <ul>
    <li>
      <img src="图片资源地址"/>
    </li>
    <li>
      <img src="图片资源地址"/>
    </li>
    <li>
      <img src="图片资源地址"/>
    </li>
    <li>
      <img src="图片资源地址"/>
    </li>
    <li>
      <img src="图片资源地址"/>
    </li>
    <li>
      <img src="图片资源地址"/>
    </li>
    <li>
      <img src="图片资源地址"/>
    </li>
    <li>
      <img src="图片资源地址"/>
    </li>
    <li>
      <img src="图片资源地址"/>
    </li>
    <li>
      <img src="图片资源地址"/>
    </li>
  </ul>
</div>

关键调整说明 #

• flex: 0 0 10% 强制每个列表项宽度固定为父容器的10%，10个元素刚好占满整行，不会出现自动伸缩或换行，保证图片之间无间距。
• aspect-ratio: 4/3 直接固定元素宽高比为4:3，不需要手动计算设置容器高度，高度会随屏幕宽度自动适配，始终保持比例。
• object-fit: cover 避免图片被拉伸变形，如果需要完整显示整张图片，可将属性值替换为contain。
• 移除了外层容器的固定高度设置，避免强制压缩图片比例。

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