html width/height属性仅支持像素和百分比，不支持em、rem、vh等css单位；其值无单位即为px，百分比依赖父容器宽度；响应式需求须用css样式实现。
HTML width 和 height 属性只接受像素或百分比
这两个属性不支持 em、rem、vh、vw 或任何 CSS 单位——浏览器会直接忽略非法值，退回到默认尺寸或按内容撑开。比如写 <img style="max-width:90%" alt="HTML怎么设置图像尺寸单位_HTML width height属性教程【控制】" >，实际等同于没写 width。
常见错误现象：width="100%" 在父容器没设宽时失效；height="auto" 不被 HTML 属性支持（那是 CSS 的事）。
-
width和height是 HTML 原生属性，仅用于设置「初始渲染尺寸」，本质是内联的width/heightCSS 声明（但单位受限） - 数值不带单位：写
width="300"表示 300px；写width="50%"才表示百分比 - 百分比基于包含块宽度计算，若父元素宽为
auto（如普通<div>），则 <code>width="100%"可能无效果用 CSS 替代 HTML 属性才能用现代单位
想用
vw、rem、max-width或响应式约束？必须用style或外部 CSS。HTML 属性做不到。使用场景：适配移动端、等比缩放、根据视口动态调整图片大小。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
<img src="a.jpg" style="max-width:90%" alt="HTML怎么设置图像尺寸单位_HTML width height属性教程【控制】" > - 注意
height: auto必须显式写，否则可能拉伸变形；单独设width后加height: auto才保持原比例 - 如果用类名控制，CSS 中优先级高于 HTML
width/height属性（因为后者会被转为内联样式，而!important或更具体选择器可覆盖）
HTML 属性和 CSS 同时存在时谁生效？
HTML
width/height会被转成等价的内联style，和你手写的style属于同一优先级，后出现的声明胜出。常见错误现象：写了
<img style="max-width:90%" style="width: 100%;" alt="HTML怎么设置图像尺寸单位_HTML width height属性教程【控制】" >，结果还是 200px 宽——因为 HTML 属性生成的样式在前，CSS 写在后，所以被覆盖；但若 CSS 是外部文件且加载慢，可能闪一下 200px 再变 100%。- 浏览器解析顺序：先处理 HTML 属性，生成初始
style；再应用style属性；最后是外部/内部 CSS - 避免混用：要么全用 HTML 属性（仅限简单像素/百分比），要么全用 CSS（推荐，更灵活）
- 特别注意：某些 CMS 或编辑器会自动补
width/height，导致你写的 CSS 被意外覆盖
为什么
height百分比经常不生效？因为 HTML
height="50%"的百分比是相对于父元素高度计算的，而绝大多数父容器默认高度为auto，也就是“由内容决定”，没有明确数值，百分比就失去参照。使用场景：需要图片占满视口高度、或与兄弟元素等高时。
- 必须确保父级有明确高度，比如
<div style="height: 400px;"><img style="max-width:90%" alt="HTML怎么设置图像尺寸单位_HTML width height属性教程【控制】" ></div> - 用
vh就没这问题：style="height: 80vh;"直接相对视口，无需父级设高 - Flex 或 Grid 布局中，
height: 100%更可靠，但前提是父容器已启用display: flex或grid且自身高度明确
真正麻烦的是嵌套多层、又依赖 JS 动态计算高度的情况——这时候别硬扛百分比，改用 CSS
aspect-ratio或 JS 控制更稳。 - 正确写法：
