如何根据图片数量动态调整容器内图片宽度？

直接基于你现有的Flex布局修改，通过CSS子元素数量选择器就能实现需求，不用额外加JS判断。

修改后的CSS代码 #

.images {
    display: flex;
    gap: 8px; /* 可选，给图片加间距，视觉效果更舒适 */
}

.images img {
    max-height: 520px;
    object-fit: cover; /* 保证图片不变形，裁剪多余部分；换成contain可完整显示图片 */
    box-sizing: border-box;
}

/* 1张图片时占满整宽 */
.images img:only-child {
    width: 100%;
}

/* 2张图片时各占半宽，减去gap的一半避免布局溢出 */
.images img:nth-child(2):nth-last-child(1),
.images img:nth-child(1):nth-last-child(2) {
    width: calc(50% - 4px);
}

/* 3张图片时各占1/3宽，同理减去gap的1/3 */
.images img:nth-child(3):nth-last-child(1),
.images img:nth-child(2):nth-last-child(2),
.images img:nth-child(1):nth-last-child(3) {
    width: calc(33.333% - (16px/3));
}

代码说明 #

• flex 布局让图片横向排列，gap 控制图片间的间距，避免挤在一起
• object-fit: cover 解决图片拉伸变形问题，可根据需求替换为contain
• 用:only-child、nth-child+nth-last-child组合精准匹配图片数量，自动分配对应宽度
• calc 计算宽度时减去gap的对应部分，确保总宽度不超出容器范围

现代浏览器简化写法（使用:has()选择器） #

如果项目仅需兼容现代浏览器，可采用更简洁的:has()写法：

.images {
    display: flex;
    gap: 8px;
}

.images img {
    max-height: 520px;
    object-fit: cover;
    box-sizing: border-box;
}

.images:has(img:only-child) img {
    width: 100%;
}

.images:has(img:nth-child(2)):not(:has(img:nth-child(3))) img {
    width: calc(50% - 4px);
}

.images:has(img:nth-child(3)) img {
    width: calc(33.333% - (16px/3));
}

HTML部分无需修改，直接在.images容器内放置1-3张图片，即可自动适配宽度。

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