基于图片方向的响应式Flex布局实现需求（无需:nth-child）

需求说明 #

• 横版图片（宽≥高）需占满父容器宽度
• 竖版图片（高>宽）每行显示2张
• 动态实现，禁止使用:nth-child选择器

修改后完整代码 #

CSS代码

main {
  background: orange;
  width: 60vw;
  padding: 10px; /* 避免图片贴容器边缘 */
}

section {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 统一控制图片间距，比margin更简洁 */
}

img {
  object-fit: cover; /* 保持图片比例，防止拉伸变形 */
}

/* 竖版图片：宽高比<1（高>宽），每行显示2张 */
img[aspect-ratio < 1] {
  flex: 1 1 calc(50% - 5px); /* 基础宽度50%（减去一半gap），可伸缩 */
  min-width: 200px; /* 可选：避免小屏幕下图片过窄 */
}

/* 横版图片：宽高比≥1（宽≥高），占满整行 */
img[aspect-ratio >= 1] {
  flex: 1 1 100%;
}

HTML代码

<main>
  <section>
    <img src="https://picsum.photos/200/300" alt="竖版图片" class="hero">
    <img src="https://picsum.photos/200/320" alt="竖版图片" class="hero">
    <img src="https://picsum.photos/600/300" alt="横版图片" class="hero">
    <img src="https://picsum.photos/200/300" alt="竖版图片" class="hero">
    <img src="https://picsum.photos/700/300" alt="横版图片" class="hero">
  </section>
</main>

实现思路 #

1. 借助CSS aspect-ratio 属性，直接根据图片自身宽高比区分横竖版，无需额外加类或依赖位置选择器，完全动态适配。
2. Flex布局的flex属性配合flex-wrap: wrap，让图片自动换行：竖版图片基础宽度设为50%（扣除间距），空间不足时自动换行；横版图片直接占满整行。
3. gap属性统一管理图片间距，避免margin边距叠加的问题，维护更省心。
4. object-fit: cover确保图片在容器内按比例显示，不会出现拉伸变形的情况。

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