如何让grid布局中图片与div文本框同尺寸、缩放响应且图片占满整列

实现方案 #

你只需要补充以下CSS规则即可满足两个需求：

/* 原有规则基础上补充修改 */
#get-started-page .section1 {
    /* 原有属性保留，新增下面这行 */
    grid-auto-rows: 1fr;
}

.image-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.image-container img {
    width: 100%;
    height: 100%;
    /* 保证图片不变形填满容器，裁剪超出部分 */
    object-fit: cover;
    /* 可选：调整图片显示的锚点位置，默认center即可保证核心内容展示 */
    object-position: center;
}

规则说明

• grid-auto-rows: 1fr 强制grid的行高按最高列统一，不管是文字框内容高度变化还是页面缩放，两个列的宽高永远保持一致
• object-fit: cover 保证图片不会拉伸变形，完全填满所在的列容器，多余的边缘部分会自动裁剪
• 所有规则都是响应式适配，不需要额外加媒体查询，缩放页面时会自动适配尺寸

完整可运行代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid适配示例</title>
    <style>
        #get-started-page .section1 {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-auto-rows: 1fr;
        }

        .pink-box {
            background: #fee5d6;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        
        .image-container {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
    </style>
</head>
<body>
    <div id="get-started-page">
        <div class="section1">
            <div class="pink-box">
                <h1>Certification</h1>
                <h2 class="lowercase">#roadmaptocert</h2>
            </div>
            <div class="image-container">
                <img src="https://www.imgonline.com.ua/examples/bee-on-daisy.jpg" alt="hair-stylist" />
            </div>
        </div>
    </div>
</body>
</html>

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