如何使Hero Image内的文本实现响应式？

我是Bootstrap新手，正在搭建响应式网站。想让Hero Image内的文本始终居中，但背景图缩放时文本位置固定，小视口下显示异常。以下是我尝试的代码：

原代码 #

HTML #

<header class="header-container">
    <!-- background img -->
    <div class="bg-image d-flex justify-content-center align-items-center">
        <div class="text-center">
            <h1 class="h1-hero h-font">where great ideas come to life</h1>
            <p class="p-hero text-font">Passionate creative studio helping startups grow their
                business!
            </p>

        </div>
    </div>
</header>

CSS #

.header-container {
    padding: 48px 50px 0px;
    max-width: 100%;
}

.bg-image {
    background-image: url('../img/hero.png');
    background-size: 100%;
    height: 100vh;
    background-repeat: no-repeat;
}

.h1-hero {
    font-size: var(--font-size-h1);
    font-weight: 500;
    line-height: 106px;
    letter-spacing: 4.5px;
    text-transform: uppercase;
    color: white;
}

.p-hero {
    font-family: var(--font-family-text);
    font-size: 20px;
    color: white;
    opacity: 80%;
    font-weight: 300;
    line-height: 23px;
    letter-spacing: 1.3px;
    padding-top: 12px;
}

问题分析 #

• background-size: 100% 会强制背景图拉伸至容器宽度，高度随比例缩小，小视口下背景图高度骤降，导致文本看起来偏离背景图中心
• 固定的字体大小、行高和字母间距在小屏幕上会出现文本溢出或排版错乱

修复方案 #

修改后的CSS #

.header-container {
    padding: 48px 50px 0;
    width: 100%; /* 确保容器铺满视口宽度 */
}

.bg-image {
    background-image: url('../img/hero.png');
    background-size: cover; /* 保持背景图比例，铺满容器 */
    background-position: center center; /* 背景图始终居中显示 */
    height: 100vh;
    background-repeat: no-repeat;
}

.h1-hero {
    font-size: clamp(2rem, 5vw, var(--font-size-h1)); /* 响应式字体：最小2rem，最大用自定义变量，随视口宽度自适应 */
    font-weight: 500;
    line-height: 1.2; /* 相对行高，随字体大小变化 */
    letter-spacing: 2px; /* 缩小间距，优化小屏幕排版 */
    text-transform: uppercase;
    color: white;
}

.p-hero {
    font-family: var(--font-family-text);
    font-size: clamp(1rem, 2vw, 20px); /* 响应式字体 */
    color: white;
    opacity: 0.8;
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0.5px;
    padding-top: 12px;
}

关键修改点 #

1. 背景图适配：用background-size: cover替代100%，配合background-position: center center，保证背景图始终按比例铺满容器且居中，不会因视口缩放变形
2. 响应式字体：使用clamp()函数设置字体大小，实现小屏幕自动缩小、大屏幕保持原有尺寸，避免文本溢出
3. 自适应行高与间距：将固定行高改为相对值，缩小字母间距，确保小屏幕下文本排版紧凑合理

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