如何根据屏幕宽度选择适配的背景图片尺寸？

当前代码存在的适配问题 #

现有代码将背景尺寸写死为background-size: 100% 100%，同时固定了容器高度，会导致背景图在非桌面端屏幕下拉伸变形，容器内容也容易出现溢出遮挡的问题。

<!-- 你当前的代码片段 -->
<main id="main">
    <section class="uvsbg text-center">
        <div class="container" data-aos="fade-up" style="height:950px;">
            <div class="row" style="background: url('assets/img/contact-bg5.jpg'); background-size: 100% 100%; position: relative; height: 850px;">
                <div class="col-md-12"> 
                    <h1 style="color:#fff;text-align:center;margin-top:50px;font-size: 52px;">Contact Us

优化方案 #

1. 调整HTML结构，抽离行内样式

把所有行内样式转移到CSS样式表中，方便编写不同屏幕的适配规则：

<!-- 优化后的HTML -->
<main id="main">
    <section class="uvsbg text-center">
        <div class="container" data-aos="fade-up">
            <div class="row contact-bg-row">
                <div class="col-md-12"> 
                    <h1>Contact Us</h1>
                </div>
            </div>
        </div>
    </section>
</main>

2. 编写自适应CSS规则

用background-size: cover替代固定比例，搭配媒体查询针对不同屏幕调整参数：

/* 桌面端默认样式 */
.contact-bg-row {
    background: url('assets/img/contact-bg5.jpg') no-repeat center center;
    background-size: cover; /* 保持图片原有比例覆盖容器，避免拉伸变形 */
    position: relative;
    min-height: 850px; /* 用最小高度替代固定高度，内容超出时自动撑开 */
}
.contact-bg-row h1 {
    color:#fff;
    text-align:center;
    margin-top:50px;
    font-size: 52px;
}
.container {
    min-height: 950px;
}

/* 适配小于768px的移动端 */
@media (max-width: 768px) {
    .contact-bg-row {
        /* 可替换为提前裁剪好的移动端专属背景图，减少加载体积 */
        background-image: url('assets/img/contact-bg5-mobile.jpg');
        min-height: 500px;
    }
    .contact-bg-row h1 {
        font-size: 32px;
        margin-top: 30px;
    }
    .container {
        min-height: 600px;
    }
}

/* 适配768px-1200px的平板设备 */
@media (min-width: 768px) and (max-width: 1200px) {
    .contact-bg-row {
        min-height: 700px;
    }
    .container {
        min-height: 800px;
    }
}

补充说明 #

• 如果不需要为不同设备更换不同的背景图，媒体查询中可以省略background-image的定义，只调整高度、背景位置即可
• 如果需要完整显示背景图的全部内容，可以把background-size设置为contain，但会在容器边缘出现留白
• background-position: center center可以保证背景图的核心区域始终在容器可视范围内，避免重要内容被裁剪

内容的提问来源于stack exchange，提问作者Sergio Van Roosmalen