如何基于内容尺寸调整CSS Grid列宽？三图两列布局求解

核心需求 #

• 列1：Image A使用object-fit: cover，可按需裁剪和缩放。
• 列2：Image B和C需共同填满整个屏幕高度，仅允许底部裁剪，不能左右或顶部裁剪。

额外要求：Image B和C可能有不同的宽高比，需编写适配多种比例的代码；且原图尺寸小于最终显示尺寸（例如原图宽300px，最终显示宽1000px），列2需根据B、C的宽高比自动调整宽度。

遇到的问题 #

尝试过Grid和Flexbox的多种组合，使用过1fr、stretch、max-content等参数，但始终无法达到预期效果：要么B、C无法填满列2高度，要么填满但左右被裁剪（列宽度未自动调整），要么图片出现拉伸变形。不确定是否应采用嵌套网格或Grid+Flexbox的组合方案。

预期实现步骤 #

1. 确保Image B和C宽度一致；
2. 放大B、C（同步调整列2宽度），直至列2完全填满屏幕高度；
3. 让Image A填充剩余空间并按需裁剪。

代码片段 #

在该代码片段中，image B为方形，image C为宽屏样式。在列2中使用B+B、B+C或C+C的组合可模拟三种不同比例的情况。

CSS代码 #

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
}

.template {
    height: 1000px;
    width: 1777px;
    display: grid;
    grid-template-columns: 1fr max-content;
}

.column-1 {
    height: 100%;
    grid-column: 1 / 2;
}

.column-1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.column-2 {
    grid-column: 2 / 3;
}

.column-2 img {
    width: 100%;
}

HTML代码 #

<body>
    <div class="template">
        <div class="column-1">
            <img src="https://i.sstatic.net/8MHbl4HT.png">
        </div>
        <div class="column-2">
            <img src="https://i.sstatic.net/JCTnUi2C.png">
            <img src="https://i.sstatic.net/oJW3N1vA.png">
        </div>
    </div>
</body>

代码片段所用图片 #

• imageA
• imageB
• imageC

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