如何让Flexbox列保持100%高度，适配不同宽高比图片且不裁剪

需求与问题梳理 #

• 目标布局：三列结构，左右两列各占40%宽度，右侧操作列占15%；整体高度限制在100vh内，无滚动条
• 左侧列：放置宽高比不固定的图片，锚定列左侧，同时适配横、竖版图片
• 中间列：纵向排列两张无间距图片，要求宽度一致且整体高度占满页面
• 当前问题：图片易拉伸变形、尺寸混乱或超出页面；调整后高度适配但宽度不一致，底部图片丢失内边距

调整后的完整代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Test Move Object</title>
    <script type="text/javascript" src="../frontend/index.js"></script>
    <link rel="stylesheet" type="text/css" href="../frontend/index.css">
</head>
<body onload="docReady()" onkeydown="" onkeyup="" >
<div class="container1" >
    <div class="column-left" style="flex: 0 0 40%;">
        <img id="image2" src="../frontend/testimg.jpg" alt="Main Image" >
    </div>
    <div class="column-middle" style="flex: 0 0 40%;">
        <div class="image-pair">
            <img id="croppedimg1" src="../frontend/croppedtemp.jpg" alt="">
            <img id="croppedimg2" src="../frontend/cropped.jpg" alt="">
        </div>
    </div>
    <div class="column-right" style="flex: 0 0 15%;">
        <h3 id="speed">Speed Placer</h3>
        <h3 id="test1">Test Placer</h3>
    </div>
</div>
</body>
</html>

CSS代码 #

body, html {
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
}

.container1 {
    height: 100%;
    display: flex;
    gap: 0;
    padding: 10px;
    box-sizing: border-box;
}

/* 左侧列：图片锚定左侧，保持原比例 */
.column-left {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.column-left img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* 中间列：纵向两张图片无间距，同宽占满高度 */
.column-middle {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.image-pair {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 0;
}

.image-pair img {
    flex: 1;
    width: 100%;
    object-fit: contain;
    object-position: center;
}

/* 右侧操作列 */
.column-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.column-right h3 {
    margin: 0;
    width: 100%;
}

核心修改说明 #

1. 简化结构：将原嵌套的多层容器改为清晰的三列类名，避免层级混乱导致的布局冲突
2. 固定列宽：用flex: 0 0 40%明确列宽，禁止flex自动伸缩，保证布局稳定性
3. 图片适配：所有图片添加object-fit: contain，强制保持原比例，同时通过max-width/max-height或flex:1控制尺寸边界，杜绝拉伸和裁剪
4. 盒模型修正：给根容器添加box-sizing: border-box，让内边距计入总宽度，避免整体超出视口
5. 中间列布局：通过flex-direction: column和flex:1让两张图片平分高度，gap:0消除图片间多余间距

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