Flexbox布局下图片组适配主容器及图片等比缩放问题

需要实现嵌套结构的图片列表，要求：

• 每组内图片通过display: flex横向排列
• 各图片组通过display: flex; flex-direction: column纵向排列
• 整体高度等于视口高度，图片组数量、每组图片数量均不固定（示例为两组各两张图片）
• 图片保持原有宽高比，适配网页且不溢出

现有代码存在两个问题：图片未缩放适配主容器，image-group容器溢出main-container。需要实现：

1. image-group容器收缩至main-container高度范围内
2. 图片适配父容器高度并保持宽高比

原HTML代码 #

<body>
    <div class="main-container">
        <div class="image-group" id="dup-set-1">
            <img src="./images/1.jpg" class="duplicate-image">
            <img src="./images/2.jpg" class="duplicate-image">
        </div>
        <div class="image-group" id="dup-set-2">
            <img src="./images/3.png">
            <img src="./images/4.jpg">
        </div>
    </div>
</body>

原CSS代码 #

body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
}

.main-container {
    display: flex;
    flex-direction: column;
    margin: auto;
    width: 100%;
    height: 100vh; /* Make the whole container the height of the viewport*/
    border: 10px red solid;
}

.image-group {
    flex: 1; /* Size the group divs to the height of the main container */
    display: flex;
}

.image-group img {
    max-height: 100%;
    max-width: 100%;
    height: 100%; /* Make the image height fit the height of its parent group div */
    width: auto; /* Scale the image to keep its original apsect ratio */
}

问题核心在于盒模型计算错误和flex容器的子项收缩限制，以下是修复方案：

关键修改点 #

1. 修复容器高度溢出：给main-container添加box-sizing: border-box，让边框包含在容器高度内，避免因边框占用额外空间导致溢出视口。
2. 允许图片组收缩：给image-group添加min-height: 0，解除flex子项默认的最小高度限制，确保它能收缩到适配main-container的高度；同时添加overflow: hidden隐藏超出组容器的内容。
3. 优化图片缩放逻辑：改用object-fit: contain保证图片宽高比不变且完整显示在容器内，配合width: 100%和max-height: 100%实现双向适配。

修改后的完整代码 #

HTML代码（无需调整） #

<body>
    <div class="main-container">
        <div class="image-group" id="dup-set-1">
            <img src="./images/1.jpg" class="duplicate-image">
            <img src="./images/2.jpg" class="duplicate-image">
        </div>
        <div class="image-group" id="dup-set-2">
            <img src="./images/3.png">
            <img src="./images/4.jpg">
        </div>
    </div>
</body>

CSS代码 #

body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 统一全局盒模型 */
}

.main-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    border: 10px red solid;
    box-sizing: border-box; /* 边框计入容器高度，避免溢出 */
}

.image-group {
    flex: 1; /* 平分main-container的可用高度 */
    display: flex;
    min-height: 0; /* 允许flex子项收缩至小于内容高度 */
    overflow: hidden; /* 隐藏超出组容器的内容 */
}

.image-group img {
    width: 100%; /* 横向填充父容器 */
    max-height: 100%; /* 高度不超过组容器 */
    object-fit: contain; /* 保持宽高比，完整显示图片 */
}

可选调整 #

如果需要图片填充整个容器（允许裁剪边缘），可将object-fit: contain替换为object-fit: cover。该方案支持任意数量的图片组和每组图片，均能自动适配视口高度并保持比例。

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