如何防止文本超出div？背景图文本响应式布局问题

问题说明 #

尝试将文本对齐到背景图片上，但调整浏览器窗口大小时，文本会跳出图片范围，需要实现文本与图片的响应式适配，窗口缩放时文本始终在图片区域内。

解决方案 #

核心修改思路 #

• 用flex布局替代绝对定位实现文本居中，避免固定偏移量导致的超出问题
• 给文本容器添加内边距和最大宽度限制，确保文本始终在背景图片范围内
• 优化banner容器的样式，保证背景图始终覆盖可视区域

修改后的代码 #

HTML（结构无需调整）

<section class="banner" id="home">
    <div class="banner-container">
        <div class="banner-text">
            <h3>Chicago</h3>
            <p>Thank you, Chicago - A night we won't forget!</p>
        </div>
    </div>
</section>

CSS

.banner {
    max-width: 130rem;
    width: 100%;
    height: 100vh;
    /* 窗口宽于130rem时，banner水平居中 */
    margin: 0 auto;
    background-image: linear-gradient(rgba(54, 52, 52, 0.16), rgba(51, 49, 49, 0.12)), url(/coverband.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.banner-container {
    /* 用flex铺满banner容器，实现内部元素居中 */
    display: flex;
    justify-content: center;
    align-items: flex-end; /* 对应原效果的底部居中，需垂直居中可改为center */
    height: 100%;
    /* 添加上下左右内边距，防止文本贴边或超出图片 */
    padding: 2rem;
    box-sizing: border-box;
}

.banner-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    color: #e6e6e6;
    /* 限制文本最大宽度，避免窗口过宽时文本拉伸超出图片 */
    max-width: 90%;
    text-align: center;
}

关键修改点解释 #

1. banner添加margin: 0 auto：当窗口宽度大于130rem时，banner水平居中，避免背景图两侧出现空白，文本不会跑到空白区域。
2. banner-container改为flex布局：通过justify-content: center和align-items: flex-end实现文本在容器底部居中，比固定transform偏移更适配响应式场景。
3. 添加内边距和盒模型设置：padding: 2rem确保文本和图片边缘有间距，box-sizing: border-box让内边距不会撑开容器宽度。
4. banner-text限制最大宽度：max-width: 90%保证文本在窗口缩放时不会过宽，text-align: center增强可读性。

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