HTML img 的 width/height 属性仅接受无单位纯数字（如 width="400"），写 px 或 % 会被忽略；仅对 img 标签生效，不校验宽高比，且 CSS 设置会覆盖其预留空间效果。
img 的 width 和 height 属性只接受纯数字
HTML width 和 height 属性不是 CSS，它们是原生 HTML 属性，浏览器只认无单位的纯数字（如 width="400"），写成 width="400px" 或 width="50%" 会被忽略——不是报错，而是直接失效，退化为无尺寸声明状态。
常见错误现象：图片在页面加载时突然“跳动”，就是因为写了 width="100%" 却没生效，浏览器直到图片加载完成才推算尺寸。
- 只对
<img>生效，<picture>、<source>不支持 - 值为像素数时，单位隐式为 px；百分比值在 HTML 属性中不被解析（CSS 中才支持）
- 若原始图是 1200×800，你写
width="300" height="200"，宽高比一致（3:2），能安全预留空间 - 若写成
width="300" height="150"（2:1），浏览器仍会渲染，但图片被压扁——HTML 属性不校验比例，只管占位
CSS 覆盖会让 HTML width/height 失效
哪怕你老老实实写了 <img src="a.jpg" width="600" height="400">，只要 CSS 里出现以下任一规则，预留空间就白写了：
-
img { width: 100%; height: auto; }—— 直接用 CSS 值覆盖 intrinsic size，浏览器按 100% 渲染，但 layout space 还是按 600×400 预留，造成空白或错位 -
img { max-width: 100%; }+ 父容器宽度 -
img { object-fit: cover; }却没配width/height——object-fit只管“怎么填”，不管“占多大”，没有尺寸声明就无法预留
真正起作用的组合是：<img width="600" height="400"> + img { width: 100%; height: auto; }，此时 HTML 属性仅用于占位，CSS 控制最终渲染，二者分工明确。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
现代推荐用 aspect-ratio + width 替代
HTML width/height 属性虽有效，但限制多（只支持 <img>、不支持响应式单位、易被 CSS 意外覆盖）。更可控的方式是用 CSS 的 aspect-ratio：
<img src="a.jpg" style="width: 100%; aspect-ratio: 3 / 2;">
-
aspect-ratio: 3 / 2告诉浏览器“这个容器必须保持 3:2”，配合width: 100%就能自动算出高度，且不会被height: auto破坏 - 兼容性注意：Chrome 88+、Firefox 89+、Safari 15.4+ 支持；旧版 Safari 需加
-webkit-aspect-ratio前缀 - 如果必须兼容 IE 或老安卓 WebView，仍得退回 HTML 属性 + 严格 CSS 管控的老方案
只设 width 或 height 时浏览器会自动推算另一个
这是唯一能“半靠 HTML 属性防跳动”的偷懒方式：只写 width="400"，不写 height，浏览器会按原始图宽高比算出高度并预留——前提是原始图元数据可读（即未被裁剪或损坏）。
但要注意：
- 如果图片跨域且服务器没配
CORS，浏览器拿不到原始尺寸，height推算失败，仍会跳动 - 服务端生成的图若丢失 EXIF 或尺寸头信息（比如某些 CDN 自动压缩后），也会导致推算不准
- 这种“半预留”不如完整
width+height可靠，适合快速原型，不适合对 CLS（累积布局偏移）有硬要求的生产环境
真正稳的方案，始终是「原始宽高比已知 + HTML width/height 全写 + CSS 不强制重设 height」，三者缺一不可。任何环节松动，防跳动就成空谈。
