width="100%"常失效因父容器无明确宽度，且与height: auto冲突；CSS中width:100%;height:auto;需父容器有可计算宽度、图片无内联宽高、flex容器加min-width:0，并注意全局样式覆盖。
img 标签直接写 width="100%" 为什么经常失效
因为 width="100%" 是 HTML 属性，它只在父容器有明确宽度时才生效；而多数情况下，父容器（比如空 <div>）没设宽，或被 flex/grid 布局撑开但没约束尺寸，100% 就失去参照，最终按图片原始像素渲染。更糟的是，它还会和 CSS 的 <code>height: auto 冲突——HTML 属性优先级高于部分 CSS 规则，导致高度锁死。
CSS 中 width: 100%; height: auto; 的真实前提
这组规则能工作的前提是：
- 父容器必须有可计算的宽度（例如设了
width、max-width，或处于正常流中且上层有宽度约束） - 图片不能带内联
width/height属性（如<img style="max-width:90%" style="max-width:90%" alt="HTML标签怎么设置图片自适应百分比宽高" >），否则会覆盖height: auto - 若在 flex 容器里，需额外加
min-width: 0防止子项默认不收缩 - 全局样式（如 Bootstrap）可能重置了
img { max-width: none }，得用!important或提高选择器权重覆盖
object-fit + 固定容器才是可控的“百分比视觉自适应”
真正想让图片「看起来」按百分比填充某个区域（比如卡片占屏宽 80%，高固定为 200px），不能只调 <img alt="HTML标签怎么设置图片自适应百分比宽高" > 自身，而要控制它的容器：
- 给外层
<div> 设 <code>width: 80vw; height: 200px;（或用aspect-ratio: 16/9） -
<img alt="HTML标签怎么设置图片自适应百分比宽高" >设display: block; width: 100%; height: 100%; object-fit: cover; - 需要顶部对齐裁剪？加
object-position: top; - 老版 iOS Safari 要补
-webkit-object-fit: cover;；IE 不支持，fallback 只能换background-image，但会丢alt和 SEO <img src="small.jpg" srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw" alt="HTML标签怎么设置图片自适应百分比宽高" >-
sizes告诉浏览器“在什么断点下，这张图大概占多宽”，浏览器据此选最接近的srcset项 - 单独用
width: 100%是“缩放”，srcset+sizes是“精准加载”，二者缺一不可
srcset + sizes 才是响应式图片的完整解法
纯 CSS 缩放解决不了带宽浪费问题。如果图片在手机上只需 400px 宽，却加载了 2000px 原图，再怎么 width: 100% 都白搭。这时候必须配合：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
容易被忽略的关键点：所谓“百分比宽高”，浏览器从不自动推算宽高比；你看到的“自适应”，其实是容器约束 + 图片等比缩放 + 裁剪策略共同作用的结果。漏掉任意一环，就只剩拉伸或溢出。
