如何在固定宽度Div中无空隙排列1-10张新闻Feed图片

核心实现思路 #

放弃后端的行列划分与比例计算，改用CSS Grid布局结合数量匹配规则实现需求：通过容器内图片的数量自动应用对应网格模板，用gap控制均等间距，图片通过object-fit保持比例并填满网格单元，完全无需JS介入。

实现代码 #

HTML结构

<div class="post-image-container">
  <!-- 动态渲染1-10张图片 -->
  <img src="image1.jpg" alt="帖子图片">
  <img src="image2.jpg" alt="帖子图片">
  <!-- 更多图片... -->
</div>

CSS样式

/* 基础容器配置 */
.post-image-container {
  display: grid;
  gap: 8px; /* 图片间/行间均等间距，可按需调整 */
  width: 100%;
}

/* 1张图片：占满整行 */
.post-image-container:has(img:nth-child(1):last-child) {
  grid-template-columns: 1fr;
}

/* 2张图片：平分宽度 */
.post-image-container:has(img:nth-child(2):last-child) {
  grid-template-columns: repeat(2, 1fr);
}

/* 3张图片：上2张平分，下1张占满 */
.post-image-container:has(img:nth-child(3):last-child) {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.post-image-container:has(img:nth-child(3):last-child) img:nth-child(3) {
  grid-column: 1 / -1;
}

/* 4张图片：2×2网格 */
.post-image-container:has(img:nth-child(4):last-child) {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

/* 5张图片：上2张各占2列，下3张各占1列 */
.post-image-container:has(img:nth-child(5):last-child) {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.post-image-container:has(img:nth-child(5):last-child) img:nth-child(1),
.post-image-container:has(img:nth-child(5):last-child) img:nth-child(2) {
  grid-column: span 2;
}

/* 6张图片：2×3网格 */
.post-image-container:has(img:nth-child(6):last-child) {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

/* 7张图片：3×2网格 + 最后1张占满整行 */
.post-image-container:has(img:nth-child(7):last-child) {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
.post-image-container:has(img:nth-child(7):last-child) img:nth-child(7) {
  grid-column: 1 / -1;
}

/* 8张图片：2×4网格 */
.post-image-container:has(img:nth-child(8):last-child) {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

/* 9张图片：3×3网格 */
.post-image-container:has(img:nth-child(9):last-child) {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

/* 10张图片：3×3网格 + 最后1张占满整行 */
.post-image-container:has(img:nth-child(10):last-child) {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
}
.post-image-container:has(img:nth-child(10):last-child) img:nth-child(10) {
  grid-column: 1 / -1;
}

/* 图片统一样式：保持比例，填满网格单元 */
.post-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 裁剪保持比例，用contain则显示完整但可能留空 */
  border-radius: 4px; /* 可选：添加圆角美化 */
}

兼容方案（针对不支持:has()的浏览器） #

如果需要兼容旧版浏览器，只需在后端给容器添加对应图片数量的类（仅传递数量，无需处理行列逻辑）：

<!-- Django模板示例 -->
<div class="post-image-container img-count-{{ post.images|length }}">
  {% for img in post.images %}
    <img src="{{ img.url }}" alt="帖子图片">
  {% endfor %}
</div>

然后将CSS中的:has()选择器替换为类选择器：

.img-count-1 { grid-template-columns: 1fr; }
.img-count-2 { grid-template-columns: repeat(2, 1fr); }
.img-count-3 { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.img-count-3 img:nth-child(3) { grid-column: 1 / -1; }
/* 其余数量对应样式以此类推 */

方案优势 #

1. 纯CSS实现，无需JS，符合需求；
2. gap属性自动处理间距，不会破坏宽高比例计算；
3. 同一行图片高度由网格单元自动统一，无需手动设置；
4. 完全适配容器宽度，高度自适应，父容器无高度限制；
5. 排列模板可通过修改CSS轻松调整，扩展性强。

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