移动端预览时Hero区域背景图片被裁切的问题求助

我现在在写一个基础网站，包含导航栏和Hero区域，但在浏览器调试工具的移动端预览（比如320px宽度）时，Hero的背景图被裁切掉一半，可是我已经给相关元素设置了max-width:100%了。导航栏显示是正常的，我还没写媒体查询，本来以为默认应该让内容占满可用空间（哪怕有横向滚动），结果现在内容被裁切了，想问问我一开始哪里写错了？非常感谢帮忙！

我的当前代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SiUSpace</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <style>
        /* Enable smooth scrolling */
        html {
            scroll-behavior: smooth;
        }
        @font-face {
            font-family: 'NeueMachina';
            src: url('fonts/PPNeueMachina-InktrapRegular.otf');
        }
        @font-face {
            font-family: 'Lato';
            src: url('fonts/Lato-Regular.ttf');
        }
    </style>
</head>
<body>
    <!-- Navbar -->
    <nav class="navbar">
        <div class="navdiv">
            <div class="logo">
                <a href="#"><img src="img/logo.svg" alt="SiuSpace Logo" /></a>
            </div>
            <div class="nav-links">
                <ul>
                    <li><a href="#text-section">Das Projekt</a></li>
                    <li><a href="#projektziele">Projektziele</a></li>
                    <li><a href="#gefahresszenarien">Gefahresszenarien</a></li>
                    <li><a href="#fakten">Fakten</a></li>
                    <li><a href="#aktuelles">Aktuelles</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- Hero Section -->
    <section class="hero">
        <img src="img/Coverbild.png" alt="Cover background" class="hero-bg">
        <div class="hero-content">
            <h1>SICHERER <br> DROHNENBETRIEB <br> IM U-SPACE</h1>
        </div>
    </section>
    <!-- Text Section Below Hero -->
    <section class="text-section" id="text-section">
        <!-- Wrapper for each block -->
        <div class="text-block">
            <div class="caption">
                <h3>AUSGANGSSITUATION</h3>
            </div>
            <div class="text-content">
                <p>Derzeit werden im regulären Drohnenbetrieb nur einige Informationen von kooperativen Drohnen sowie von der Flugsicherung im Bereich der bemannten Luftfahrt gesammelt und verwertet. Gefahren kommen dagegen oft von außerhalb – z. B. von Wetterereignissen, von Vorkommnissen am Boden wie Großbränden oder Menschenansammlungen sowie von Drohnen und anderen Flugobjekten, die nicht kooperativ oder defekt sind. Um solchen Gefahren effizient entgegenzuwirken, muss man sie rechtzeitig erkennen und einschätzen, um passende Maßnahmen vorzubereiten und bei Bedarf einleiten zu können.</p>
                <p>Um solchen Gefahren effizient entgegenzuwirken, müssen sie rechtzeitig erkannt und eingeschätzt werden, um passende Maßnahmen vorzubereiten und bei Bedarf einleiten zu können.</p>
            </div>
        </div>
        <div class="text-block">
            <div class="caption">
                <h3>DURCHFÜHRUNG</h3>
            </div>
            <div class="text-content">
                <p>Die Aufgabe ist äußerst komplex und hat viele Facetten:</p>
                <p>Ein hoher Forschun...</p>
            </div>
        </div>
    </section>
</body>
</html>

CSS代码 #

body {
    font-family: 'NeueMachina', sans-serif;
    margin: 0;
    padding: 0;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}
html {
    scroll-behavior: smooth;
    height: -webkit-fill-available;
}
/* Navbar */
.navbar {
    position: sticky; /* sticks to top on scroll */
    top: 0;
    z-index: 1000;
    background-color: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.navdiv {
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logo img {
    width: 210px;
    height: 45px;
    display: block;
}
ul {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 20px;
}
li a {
    color: #4d4d4d;
    font-size: 16px;
    font-weight: bold;
    transition: color 0.3s ease;
}
li a:hover {
    color: #01A4AB;
}
/* Hero Section */
.hero {
    position: relative;
    max-width: 100%;
    height: auto;
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    color: white;
    padding: 20px;
    box-sizing: border-box;
}
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:auto;
    object-fit: cover;
    z-index: -1;
}
.hero-content {
    text-align: left;
    padding-top: 400px;
    padding-bottom: 50px;
    box-sizing: border-box;
    z-index: 1;
}
.hero-content h1 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
    margin-left: 30px;
}

问题分析与解决方案 #

我帮你拆解下核心问题和对应的修复步骤：

1. 导航栏溢出导致页面宽度被撑开（最关键的根源） #

在320px的小屏幕下，你的导航栏里的logo（210px）加上横向排列的5个导航链接+20px的间距，总宽度远远超过了视口宽度，这会让页面整体被横向撑开，出现隐藏的横向滚动条。此时Hero区域的宽度是被撑开后的页面宽度（大于320px），你在预览时只能看到视口内的部分，背景图的右侧区域被挤出了视口，看起来就像是被裁切了。

修复方案：

/* 让导航链接在小屏幕自动换行 */
.nav-links ul {
    flex-wrap: wrap;
    gap: 10px; /* 缩小间距节省宽度 */
}
/* 让logo自适应父容器宽度，避免超出 */
.logo img {
    width: 150px; /* 小屏幕先缩小logo */
    max-width: 100%;
    height: auto; /* 去掉固定高度，让比例自适应 */
}

2. Hero区域的溢出与背景图适配问题 #

你的.hero类设置了overflow: hidden，再加上.hero-content的padding-top:400px，会让Hero区域的高度被拉长，但背景图只设置了height:auto，无法铺满Hero的高度，同时overflow:hidden会直接裁切掉超出Hero容器的部分。

修复方案：

.hero {
    position: relative;
    max-width: 100%;
    height: auto;
    /* 先移除overflow:hidden，看完整显示效果 */
    /* overflow: hidden; */
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    color: white;
    padding: 20px;
    box-sizing: border-box;
    /* 给Hero设置最小高度，适配内容高度 */
    min-height: 500px;
}
/* 让背景图铺满整个Hero区域 */
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 高度占满Hero容器 */
    object-fit: cover; /* 保持图片比例，铺满容器（会裁切部分边缘） */
    /* 如果想要完整显示图片，替换成下面的属性，会出现空白边 */
    /* object-fit: contain; */
    z-index: -1;
}

3. 后续优化建议 #

• 等基础布局正常后，再添加媒体查询，比如在小屏幕下隐藏导航链接，换成汉堡菜单；
• 调整.hero-content h1的字体大小，避免在小屏幕下文字溢出；
• 测试时可以给元素加临时的边框（比如border:1px solid red），方便快速定位哪个元素导致了溢出。

内容来源于stack exchange