本文教你通过 css 媒体查询精准控制桌面端图片尺寸，避免全屏拉伸问题，同时保持移动端的响应式效果。

在响应式网页开发中，一个常见误区是仅用 width: 100% 设置图片尺寸——这虽能保证图片填满父容器（如

），但在大屏桌面设备上极易导致图片过度放大、失真或遮挡内容。你当前的 CSS：

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

让图片始终占据其最近块级父容器（即

）的全部宽度；而该

又默认撑满

，最终导致图片在桌面端“巨大无比”。

✅ 正确解法：使用媒体查询（Media Query）为不同断点设置差异化尺寸，优先保障桌面端视觉合理性，再向下兼容移动与平板。

✅ 推荐实现方案（桌面端缩放 + 移动端自适应）

将以下 CSS 添加到你现有样式表末尾（确保覆盖原始规则）：

CSS工具箱(专业版)

全功能 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 层叠优先级原则）。

⚠️ 注意事项

• 避免对 直接设 height（如 height: 300px），否则会强制拉伸变形；始终搭配 height: auto 保持宽高比。
• 若
  或

  本身无明确宽度约束（如未设 max-width 或 padding），图片仍可能意外撑开布局——建议为容器添加 max-width: 1200px; margin: 0 auto; 实现居中限宽。

  图片格式推荐继续使用 .webp（你已采用），它在保持质量的同时显著减小体积，提升加载性能。

  通过以上调整，你的英雄图将在桌面端优雅收敛，在移动端依旧流畅缩放——无需重写结构，只需几行 CSS，即可兼顾美观与响应性。