只设 width 或 height 才能保比例；同时设两者会强制拉伸。width="300"（无单位）触发浏览器自动计算height，但依赖原始宽高比，可能因EXIF错误或裁剪失效；CSS的max-width:100%; height:auto才是现代响应式保比标准。
只设 width 或只设 height 才能真正保比例；同时写两个值 = 强制拉伸，不是缩放。
只写 width 属性是最简保比方案
浏览器会读取图片原始宽高比（来自 EXIF 或加载后解析），自动算出对应 height。这是 HTML 原生行为，不依赖 JS，兼容性极好。
-
width值不能带单位，必须是纯数字，比如width="300"—— 写成width="300px"会被忽略 - 若原始图是 400×300，你写
width="200"，浏览器算出height≈150 - 但如果图被裁剪过、EXIF 没更新，或 CMS 渲染器硬塞了错误尺寸，结果仍可能变形
- 该方式在响应式布局中会“卡死”为固定像素：父容器变窄时，图片不会缩小，可能溢出
width 和 height 同时出现 = 放弃比例控制
浏览器完全无视原始宽高比，强行缩放到你写的数值。这不是等比缩放，是强制重绘。
- 常见错误：设计稿给的是 600×400 占位框，直接套用到一张 1200×800 的图上 → 加载时先占小空间，图一进来立刻撑大，触发 CLS（累积布局偏移）
- 适合场景极少：图标、按钮内嵌图、广告位等有严格容器约束且原图已预处理好的地方
- 如果真要用双值固定，建议提前用工具统一缩放原图，再写属性，别靠浏览器实时拉伸
CSS 的 width: 100%; height: auto 是现代保比标准写法
相比 HTML 属性，CSS 更灵活，支持百分比、max-width、视口单位，且不干扰 SSR 初始占位判断。
- 推荐写法：
<img src="a.jpg" style="max-width: 100%; height: auto;"> -
max-width: 100%比width: 100%更稳妥，防父容器意外超宽导致图片爆炸 - 别写
height: 100%—— 父容器没设高度时它会失效，或把图拉满撑变形 - 一旦用了
object-fit（如cover），height: auto就不起作用了，此时比例由容器决定，图只是被裁剪填入
最容易被忽略的一点：HTML 的 width/height 在搭配 srcset 和 sizes 时，仅作为 SSR 阶段的占位 fallback，不再代表最终渲染尺寸。这时候靠它保比已经不可靠了。
