如何在Div内图片过小时将并排Div切换为堆叠布局

我用CSS Grid实现了两个Div的并排布局，宽屏显示效果符合预期，但缩小页面宽度后，图片会变得过小，我希望当图片缩到特定尺寸时，两个Div自动切换为堆叠排列。

以下是我当前的代码：

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home Page</title>
</head>
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="stylesheet" href="static/css/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Fira+Sans&family=Poppins&display=swap" rel="stylesheet">
<body>
    <div class="header">
        <button><img src="static/img/book.png" width="50px"></button>
        <div class="on-right">
            <button><img src="static/img/book.png" width="50px"></button>
            <button><img src="static/img/calendar.png" width="50px"></button>
            <button><img src="static/img/controller.png" width="50px"></button>
        </div>
    </div>
    <div class="grid-container">
        <div class="grid-child purple" style="padding-left: 25px;">
            <div style="height: 100%">
                <h1 style="font-family: 'Fira Sans', sans-serif; color: #ffac1c;">My Website!</h1>
                <h2 style="font-family: 'Poppins', sans-serif;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna fringilla urna porttitor rhoncus dolor purus non enim. Purus ut faucibus pulvinar elementum integer enim.</h2>
                <h3 style="font-family: 'Fira Sans', sans-serif; color: #ffac1c;">Download the iOS app for free today!</h3>
            </div>
        </div>
        <div class="grid-child green">
            <img src="static/img/phone.png" width="50%">
        </div>
    </div>
</body>
</html>

CSS代码 #

body {
    margin: 0;
}

.header {
    top: 0;
    padding: 20px;
    background: #ffac1c;
    color: white;
    font-size: 30px;
}

.on-right {
    float: right;
}

button {
    border: none;
    outline: none;
    background: none;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 100px;
}

要实现图片缩到特定尺寸时切换为堆叠布局，核心是用CSS媒体查询监测页面宽度，达到阈值时调整Grid的列布局，同时给图片设置最小宽度避免过度缩小。

1. 给图片设置最小宽度 #

先给图片添加最小宽度限制，确保它不会缩小到你无法接受的尺寸：

.grid-child.green img {
    width: 50%;
    min-width: 200px; /* 自定义这个值，就是你能接受的图片最小宽度 */
    display: block;
    margin: 0 auto; /* 让图片在容器中居中，提升视觉效果 */
}

2. 添加媒体查询切换布局 #

根据图片最小宽度、Grid间隙和左侧内容的宽度，计算触发堆叠的页面宽度阈值。比如图片最小200px，Grid间隙100px，左侧内容至少需要300px，那么阈值大概是300 + 100 + 200*2 = 800px（可根据实际效果调整），然后添加媒体查询：

@media (max-width: 800px) {
    .grid-container {
        grid-template-columns: 1fr; /* 从两列切换为单列堆叠 */
        grid-gap: 50px; /* 可选：缩小堆叠后的间隙，更贴合移动端 */
    }
    .grid-child.green img {
        width: 40%; /* 可选：堆叠后调整图片比例，让它在单列中更协调 */
    }
}

完整的优化后CSS代码 #

body {
    margin: 0;
}

.header {
    top: 0;
    padding: 20px;
    background: #ffac1c;
    color: white;
    font-size: 30px;
}

.on-right {
    float: right;
}

button {
    border: none;
    outline: none;
    background: none;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 100px;
    padding: 20px 0; /* 添加上下内边距，避免内容贴边 */
}

.grid-child.green img {
    width: 50%;
    min-width: 200px; /* 限制图片最小宽度 */
    display: block;
    margin: 0 auto; /* 图片居中 */
}

/* 页面宽度小于800px时切换为堆叠布局 */
@media (max-width: 800px) {
    .grid-container {
        grid-template-columns: 1fr;
        grid-gap: 50px;
    }
    .grid-child.green img {
        width: 40%;
    }
}

调整说明 #

• 你可以反复测试，修改min-width和媒体查询的max-width值，确保在图片刚好要缩小到不符合预期时触发布局切换。
• 堆叠后的图片比例和Grid间隙都可以根据你的视觉需求自定义，让页面在移动端更美观。

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