本文教你通过 css 媒体查询精准控制桌面端图片尺寸，避免全屏拉伸问题，同时保持移动端的响应式效果。
在响应式网页开发中，一个常见误区是仅用 width: 100% 设置图片尺寸——这虽能保证图片填满父容器（如 <header>），但在大屏桌面设备上极易导致图片过度放大、失真或遮挡内容。你当前的 CSS：
.image-hero {
width: 100%;
height: auto;
}让图片始终占据其最近块级父容器（即 <div>）的全部宽度；而该 <div> 又默认撑满 <header>，最终导致图片在桌面端“巨大无比”。
✅ 正确解法：使用媒体查询（Media Query）为不同断点设置差异化尺寸，优先保障桌面端视觉合理性，再向下兼容移动与平板。
✅ 推荐实现方案（桌面端缩放 + 移动端自适应）
将以下 CSS 添加到你现有样式表末尾（确保覆盖原始规则）：
/* 默认状态：适配移动设备（小屏优先） */
.image-hero {
width: 100%;
height: auto;
max-width: 100%;
display: block;
}
/* 平板及以上（可选优化） */
@media screen and (min-width: 768px) {
.image-hero {
max-width: 90%;
}
}
/* 桌面端（≥1200px）：主动限制宽度，防止过大 */
@media screen and (min-width: 1200px) {
.image-hero {
width: 600px; /* 可根据设计稿调整，如 500px / 70vw 等 */
max-width: 80vw; /* 更安全：取视口宽度的 80%，避免超宽屏溢出 */
height: auto;
}
}? 关键说明：
- max-width: 80vw 比固定像素值（如 600px）更灵活，适配 2K/4K 大屏；若需严格统一尺寸，用 width: 600px 即可。
- display: block 消除图片默认的行内元素底部空白。
- 媒体查询必须放在原始 .image-hero 规则之后，否则会被前面的 width: 100% 覆盖（CSS 层叠优先级原则）。
⚠️ 注意事项
- 避免对 <img> 直接设 height（如 height: 300px），否则会强制拉伸变形；始终搭配 height: auto 保持宽高比。
- 若 <header> 或 <div> 本身无明确宽度约束（如未设 max-width 或 padding），图片仍可能意外撑开布局——建议为容器添加 max-width: 1200px; margin: 0 auto; 实现居中限宽。
- 图片格式推荐继续使用 .webp（你已采用），它在保持质量的同时显著减小体积，提升加载性能。
通过以上调整，你的英雄图将在桌面端优雅收敛，在移动端依旧流畅缩放——无需重写结构，只需几行 CSS，即可兼顾美观与响应性。
