如何在不影响grid容器及内部内容的前提下缩小移动端section高度？

问题描述 #

我用Grid布局实现了图片与文本并排效果，Section两端带有波浪形分隔元素，桌面端显示正常，但移动端Section垂直方向被过度拉伸。已经通过@media调整了波浪元素位置，但Section本身仍过高，max-height属性完全不生效。尝试修改Section和Grid容器的高度限制来控制移动端Section高度却无效果，不过其他样式变换正常，不清楚干扰因素，同时还出现了overflow问题，原因不明。

现有代码 #

CSS代码 #

section {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 300px;
    padding: 100px 20vw;
}

.grid-container {  
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: 20px;
    color: white;
    align-items:start;
}
.img {
    max-height: 100%;   
    max-width: 100%;
    width:100%;
    border: 10px solid #221D23;

}
@media (max-width: 576px) { 
    .tiny{
        max-height: 300px;
        overflow: hidden;
    }
}

HTML代码 #

<section class="tiny">
    <div class="grid-container">
        <div class="text">
            <h1>Welcome to my website!</h1>
            <p>test</p> 
        </div>
        <div class="img">
            <img class="img" src="img.jpg">
        </div>
    </div>
</section>

问题原因与修复方案 #

核心问题点 #

1. 全局样式冲突：Section全局设置了min-height: 300px，移动端的max-height: 300px被这个最小值限制，同时padding: 100px 20vw在移动端占据大量垂直空间，直接撑高Section。
2. 图片容器样式混乱：.img类同时用在容器和图片上，容器的max-height:100%没有明确父级高度参考，图片易超出预期高度，进一步拉伸Section。
3. Grid布局适配不足：移动端仍保持两列布局，内容挤压导致高度被迫增加。

具体修复代码 #

1. 修正移动端Section样式

@media (max-width: 576px) { 
    .tiny{
        max-height: 300px;
        min-height: auto; /* 覆盖全局min-height限制 */
        padding: 20px 5vw; /* 大幅减小移动端内边距 */
        overflow: hidden;
    }
}

2. 分离图片容器与图片样式

修改HTML：

<section class="tiny">
    <div class="grid-container">
        <div class="text">
            <h1>Welcome to my website!</h1>
            <p>test</p> 
        </div>
        <div class="img-container">
            <img src="img.jpg" class="content-img">
        </div>
    </div>
</section>

添加对应CSS：

.img-container {
    height: 100%;
    overflow: hidden; /* 防止图片超出容器 */
}
.content-img {
    max-height: 100%;   
    max-width: 100%;
    width:100%;
    border: 10px solid #221D23;
}

3. 移动端Grid改为单列布局

@media (max-width: 576px) {
    .grid-container {
        grid-template-columns: 1fr; /* 单列显示 */
        grid-auto-rows: minmax(auto, 140px); /* 限制每行最大高度，避免内容撑高 */
    }
}

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