width: 100%; height: auto; 是解决头部图片自适应的核心方案，强制等比缩放且不依赖JS、服务端缩图或媒体查询；overflow: hidden 无效因其仅裁剪不缩放，且对 img 元素裁剪不可靠。
直接用 width: 100%; height: auto; 就能解决绝大多数头部图片自适应问题，不需要 JS、不依赖服务器端缩图、也不必写一堆媒体查询。
为什么 overflow: hidden 不是响应式图片的解法
很多人给 <header></header> 或 <img alt="HTML网页头部图片自适应的实现方法" > 加 overflow: hidden，指望它“自动适配”——但它只裁剪溢出部分，不缩放图片本身。结果常是：大图被硬切、关键内容（比如人脸、Logo）消失、小屏上看不全。
-
overflow: hidden对<img alt="HTML网页头部图片自适应的实现方法" >元素本身几乎无效，因为<img alt="HTML网页头部图片自适应的实现方法" >默认是替换元素，不触发 BFC，裁剪行为不可靠 - 如果同时设了固定
height="700"或内联style="height: 700px"，那height: auto就彻底失效 - 搭配
justify-content: center更是白忙活——<img alt="HTML网页头部图片自适应的实现方法" >不是 flex item，除非父容器明确设了display: flex
正确写法：CSS 层级控制 + 宽高策略
核心就两条规则，必须一起用：
- 给
<img alt="HTML网页头部图片自适应的实现方法" >设width: 100%; height: auto;—— 强制等比缩放，宽度撑满父容器，高度随动 - 确保父容器（比如
<header></header>）有明确宽度（width: 100%或max-width），且没有固定高度干扰 - 若需保留最小可见区域，可用
min-height替代height，例如min-height: 200px - 避免在
<img alt="HTML网页头部图片自适应的实现方法" >上写内联width或height属性，它们会覆盖 CSS 中的auto行为
示例：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
<header style="width: 100%;"> <img src="header.jpg" alt="banner" style="max-width:90%"> </header>
遇到拉伸变形或留白？检查这些常见干扰项
即使写了 width: 100%; height: auto;，仍可能出问题，通常卡在这几个点：
-
<img alt="HTML网页头部图片自适应的实现方法" >父容器用了display: flex但没设align-items: flex-start或flex-shrink: 0，导致图片被 flex 压缩变形 - CSS 中存在全局重置如
img { max-width: 100%; }，和你写的width: 100%冲突（max-width优先级更高） - 图片本身宽高比和容器宽高比严重不匹配（比如横幅图用竖构图照片），这时光靠 CSS 缩放不够，得换图或加
object-fit: cover - 使用了
background-image而非<img alt="HTML网页头部图片自适应的实现方法" >标签——那是另一套逻辑，width/height不起作用，得用background-size: cover配合background-position
真正麻烦的不是怎么写那两行 CSS，而是图片源是否适配目标容器的宽高比；一旦比例失配，height: auto 只能保比例，不能保构图。
