页面分辨率过小时，Header图片停止缩放问题求助

问题描述 #

开发网站时，Header使用了一张背景占位图，页面在正常分辨率下显示正常，但缩小到手机分辨率时，图片停止缩放并开始被裁切。放大页面时图片可正常适配，但缩小时无法跟随屏幕宽度缩放。

正常分辨率显示效果：

移动端分辨率显示效果：

使用的Header图片：

以下是存在问题的示例代码：

<!DOCTYPE html>
<html lang="en" dir="ltr"> 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Works in progress</title>
    <link rel="icon" href="https://hazelhen.neocities.org/Imagess/favicontest.png">
    <link rel="stylesheet" href="https://hazelhen.neocities.org/NewLook/looks.css">
</head>
<body>
    <div id="container">
        <div id="headerArea">
            <div id="header"></div>
        </div>
    </div>
</body>
<style>
    :root {
    --header-image: url('https://hazelhen.neocities.org/Imagess/headertest.png');
    --content: #43256E;
}
body {
    font-family: 'Lucida Console', "Lucida Console", monospace;
    font-size: 20px;
    margin: 0;
    background-color: #d19dfc;
    background-size: 160px;
    color: #fceaff;
    background-image: url('https://hazelhen.neocities.org/Imagess/bgrose.gif');
}
* {
    box-sizing: border-box;
}
#header {
    position: unset;
    height: 120px;
    width: auto;
    background-image: var(--header-image);
    background-size: cover;
}
#flex {
    display: flex;
}
</style>

问题原因 #

当前代码中，Header使用background-size: cover且高度固定为120px。cover的特性是强制图片保持比例并完全覆盖容器，但当容器宽度小于图片宽高比对应的宽度时，图片会优先填满容器高度，导致左右部分被裁切，这就是移动端图片无法完整显示的核心原因。

解决方案 #

根据不同需求，提供三种调整方式：

方式1：完整显示图片（允许容器留空白） #

保持图片比例完整显示，容器空白处用背景色填充，适合希望图片完全展示的场景：

#header {
    position: unset;
    height: 120px;
    width: 100%; /* 设为100%确保容器占满屏幕宽度 */
    background-image: var(--header-image);
    background-size: contain; /* 保持图片比例，完整适配容器 */
    background-repeat: no-repeat; /* 禁止图片重复 */
    background-position: center; /* 图片居中显示 */
    background-color: #d19dfc; /* 填充空白区域，和页面背景色一致 */
}

方式2：优先填满高度（避免左右裁切） #

保持Header高度固定，让图片宽度自适应屏幕，避免左右裁切，适合需要固定Header高度的场景：

#header {
    position: unset;
    height: 120px;
    width: 100%;
    background-image: var(--header-image);
    background-size: auto 100%; /* 高度填满容器，宽度按比例自适应 */
    background-repeat: no-repeat;
    background-position: center;
}

方式3：自适应Header高度（完全无裁切） #

让Header高度随屏幕宽度自适应，完美保持图片比例且无裁切，适合对图片完整性要求高的场景：

#header {
    position: unset;
    width: 100%;
    background-image: var(--header-image);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 25%; /* 根据图片宽高比设置，比如图片宽高比4:1则设为25%（高度/宽度*100%） */
}

注意：padding-top的百分比基于容器宽度，需根据你的图片实际宽高比调整数值。

修改后的完整代码示例 #

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Works in progress</title>
    <link rel="icon" href="https://hazelhen.neocities.org/Imagess/favicontest.png">
    <link rel="stylesheet" href="https://hazelhen.neocities.org/NewLook/looks.css">
    <style>
        :root {
            --header-image: url('https://hazelhen.neocities.org/Imagess/headertest.png');
            --content: #43256E;
        }
        body {
            font-family: 'Lucida Console', "Lucida Console", monospace;
            font-size: 20px;
            margin: 0;
            background-color: #d19dfc;
            background-size: 160px;
            color: #fceaff;
            background-image: url('https://hazelhen.neocities.org/Imagess/bgrose.gif');
        }
        * {
            box-sizing: border-box;
        }
        #header {
            position: unset;
            height: 120px;
            width: 100%;
            background-image: var(--header-image);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            background-color: #d19dfc;
        }
        #flex {
            display: flex;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="headerArea">
            <div id="header"></div>
        </div>
    </div>
</body>
</html>

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