本文教你通过 css 媒体查询精准控制桌面端图片尺寸，避免全屏拉伸问题，同时保持移动端的响应式效果。
在响应式网页开发中，一个常见误区是仅用 width: 100% 设置图片尺寸——这虽能保证图片填满父容器（如
.image-hero {
width: 100%;
height: auto;
}让图片始终占据其最近块级父容器（即 ✅ 正确解法：使用媒体查询（Media Query）为不同断点设置差异化尺寸，优先保障桌面端视觉合理性，再向下兼容移动与平板。 将以下 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;
}
}
⚠️ 注意事项
直接设 height（如 height: 300px），否则会强制拉伸变形；始终搭配 height: auto 保持宽高比。
