图片容器背景色溢出容器底部问题求助

嘿，我仔细看了你的代码和问题描述，发现问题主要出在flex容器的高度控制和flex项的交叉轴对齐方式上，咱们一步步来修复：

问题根源分析 #

你给.card-container设置了固定的height:50%，同时用align-items:center让两个flex项在交叉轴居中，这会导致.card-image这个flex项的实际高度并没有填满容器的高度，而你给伪元素::after设置的height:100%是基于.card-image的高度，当容器被overflow-y:hidden裁剪时，伪元素就容易出现溢出或者容器底部留白的情况。之前尝试的flex-basis:0%会强制收缩flex项，但内容无法自适应填充，自然会留下空白。

具体修复步骤 #

• 调整.card-container的高度和对齐方式：去掉固定的height:50%，改用min-height:50vh让容器至少占视口一半高度，同时把align-items:center换成align-items:stretch，这样两个flex项会自动填满容器的高度，保持一致。
• 优化.card-image和图片的样式：给.card-image设置height:100%; overflow:hidden;，图片添加width:100%; height:100%; object-fit:cover;，确保图片完全覆盖容器，不会出现拉伸或留白，伪元素也能正确覆盖在上面。
• 替换全局flex-basis设置：把.card-container * { flex-basis:50%; }改成给.card-col设置flex:1 1 50%，更精准控制flex项的尺寸和伸缩性，避免影响容器内的其他元素。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stats Preview Card</title>
    <style>
        *, *:before, *:after { box-sizing: border-box; } 
        * { padding: 0; margin: 0; } 
        .wrapper { 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            height: 100dvh; 
            background-color: hsl(233, 47%, 7%); 
            padding: 2rem; /* 避免小屏幕内容贴边 */
        } 
        .card-container { 
            background-color: hsl(244, 38%, 16%); 
            max-width: 67em; 
            border-radius: .5rem; 
            min-height: 50vh; /* 替换固定高度，保证自适应 */
            overflow: hidden; 
            display: flex; 
            align-items: stretch; /* 让flex项填满容器高度 */
        } 
        .card-col {
            flex: 1 1 50%; /* 精准控制flex项尺寸 */
        }
        .card-content { 
            padding: 4rem; 
            display: flex;
            flex-direction: column;
            justify-content: center; /* 内容垂直居中，替代手动margin */
        } 
        .card-content>*+* { margin-top: 2rem; } 
        .card-image { 
            position: relative; 
            height: 100%; 
            overflow: hidden; 
        }
        .card-image img { 
            display: block; 
            width: 100%; 
            height: 100%; 
            object-fit: cover; /* 图片保持比例覆盖容器 */
        } 
        .card-image::after { 
            content: ""; 
            width: 100%; 
            height: 100%; 
            background: hsla(277, 94%, 49%, 0.323); 
            position: absolute; 
            inset: 0; 
        }
        h1 { 
            color: white; 
            margin-bottom: 2rem; 
            font-weight: bolder; 
            font-size: 2.5rem; 
        } 
        .desc { 
            color: hsla(0, 0%, 100%, 0.75); 
            margin-bottom: 4rem; 
            font-size: 1.2rem; 
            line-height: 1.6; /* 增加行高提升可读性 */
        } 
        span { color: hsl(277, 64%, 61%); } 
        .stats { 
            display: flex; 
            align-items: center; 
            gap: 3rem; /* 增大间距更美观 */
            margin-top: auto; /* 让统计项自动靠底部 */
        } 
        .stat-number { 
            color: white; 
            font-size: 1.6rem; 
            font-weight: 900; 
        } 
        .stat-desc { 
            color: hsla(0, 0%, 100%, 0.75); 
            margin-top: .5rem; 
            text-transform: uppercase; 
            font-size: .8rem; 
        } 
        @media (max-width: 820px) { 
            .card-container { 
                flex-direction: column-reverse; 
                min-height: 90vh; 
                width: 100%; 
            } 
            .card-content { 
                padding: 2rem; 
                text-align: center; 
            } 
            .stats {
                flex-direction: column;
                gap: 2rem;
            }
            h1 {
                font-size: 2rem;
            }
        }
        .attribution { font-size: 11px; text-align: center; color: white; margin-top: 1rem; } 
        .attribution a { color: hsl(228, 45%, 44%); } 
    </style>
</head>
<body>
    <main class="wrapper"> 
        <div class="card-container"> 
            <div class="card-col card-content"> 
                <h1>Get <span>insights</span> that help your business grow.</h1> 
                <p class="desc">Discover the benefits of data analytics and make better decisions regarding revenue, customer experience, and overall efficiency.</p> 
                <div class="stats"> 
                    <div class="stat-item"> 
                        <p class="stat-number">10k+</p> 
                        <p class="stat-desc">companies</p> 
                    </div> 
                    <div class="stat-item"> 
                        <p class="stat-number">314</p> 
                        <p class="stat-desc">templates</p> 
                    </div> 
                    <div class="stat-item"> 
                        <p class="stat-number">12M+</p> 
                        <p class="stat-desc">queries</p> 
                    </div> 
                </div> 
            </div> 
            <div class="card-col card-image"> 
                <img src="./images/image-header-desktop.jpg" alt="Office workspace with team collaborating" aria-hidden="false">
            </div> 
        </div> 
    </main>
    <div class="attribution">
        Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
        Coded by <a href="#">Your Name</a>.
    </div>
</body>
</html>

为什么这些修改能解决问题？ #

1. align-items:stretch 让两个flex项自动填满容器的高度，确保图片容器和内容容器高度完全一致，伪元素的100%高度也能正确匹配容器高度，不会溢出。
2. object-fit:cover 让图片在填满容器的同时保持比例，不会变形或留白，完美适配容器尺寸。
3. 移除固定height:50%改用min-height 让容器能自适应内容高度，避免内容被不必要的裁剪，同时保证在大屏幕上至少占视口一半高度。
4. margin-top:auto 让统计项在内容容器里自动靠底部，不用手动设置margin，布局更灵活。

内容来源于stack exchange