响应式头部图片桌面端过大，如何调整缩小？

问题情况 #

我在开展项目时，为设置响应式头部图片花费了大量时间，最终完成后，图片在移动端和平板端显示效果良好，但在桌面端尺寸过大。不确定能否通过现有响应式设置缩小该图片，附上相关代码及截图，因担心破坏现有效果而不敢随意修改。

HTML代码

<header class="shape"> 
    <div>
        <img class="image-hero" src="assets/images/holiday.webp" alt="holiday">
    </div>
</header>

CSS代码

body, html {
    height: 100%;
}

.image-hero {
    width: 100%;
    height: auto;
}

截图说明

桌面端显示时，图片宽度随屏幕无限拉伸，超出合理视觉范围，尺寸过大。

解决方案 #

无需改动现有移动端/平板端的响应式逻辑，仅通过CSS媒体查询针对桌面端添加限制即可：

修改后的CSS代码

body, html {
    height: 100%;
}

.image-hero {
    width: 100%;
    height: auto;
}

/* 针对桌面端的适配规则 */
@media (min-width: 1024px) {
    .image-hero {
        /* 限制图片最大宽度，可根据需求调整数值 */
        max-width: 1200px;
        /* 让图片在容器中居中，优化视觉效果 */
        display: block;
        margin: 0 auto;
    }
}

逻辑说明

1. 保留原有.image-hero的width:100%，确保移动端和平板端图片仍能自适应容器宽度
2. 媒体查询min-width:1024px会在屏幕宽度超过1024px（即桌面端）时生效
3. max-width限制图片不会随桌面端屏幕无限放大，保持合理尺寸
4. display:block + margin:0 auto让图片在header容器中居中，避免左右留白不均

可选进阶调整

如果希望header容器也同步限制宽度，让整体布局更协调，可添加：

@media (min-width: 1024px) {
    .shape {
        max-width: 1400px;
        margin: 0 auto;
    }
    .image-hero {
        max-width: 100%;
    }
}

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