HTML 中仅设 width 属性（如 width="300"）可原生等比缩放，但需省略单位且依赖原始宽高比；CSS 用 width: 100%; height: auto 或 aspect-ratio 更可靠，兼顾响应式与防 CLS。
直接写 width 和 height 属性能控制显示尺寸，但不能“真正锁定比例”——它只强制缩放，不防拉伸；要可靠保持比例，必须省略其中一个值，或用 CSS 配合 height: auto。
只设 width 且不设 height 是最简保比方案
浏览器会读取图片原始宽高比（EXIF 或下载后解析），自动计算 height 值。这是 HTML 原生行为，无需 JS，兼容性极好。
- 写法必须是
<img src="a.jpg" width="300">—— 不能带单位，不能写width="300px"，否则属性被忽略 - 若父容器宽度变化（比如响应式布局），该图片仍会按
width="300"固定像素显示，可能溢出；想让它随容器变，得换 CSS 方案 - 如果原始图是 400×300，你写
width="200"，浏览器算出height≈ 150；但如果原始图宽高比错误（如被裁剪过但 EXIF 没更新），结果仍可能变形
width 和 height 同时写 = 强制拉伸，不是保比
同时指定两个值，浏览器就完全无视原始比例，强行缩放到你写的像素值。这在图标、按钮内嵌小图等固定容器中可用，但对内容图极易失真。
- 常见错误：从设计稿抄了
width="600" height="400"，结果插入一张 1200×800 的图，页面加载时先占 600×400 空间，图一加载完立刻撑大——造成 CLS（累积布局偏移） - 更隐蔽的问题：用 CMS 或 Markdown 渲染器自动生成
img标签时，若后端没传原始尺寸，硬塞的width/height值可能和实际图不符 - 如果你确实需要双值固定（如广告位），建议提前用工具统一缩放原图，再写属性，而非靠浏览器实时缩放
CSS 中用 width + height: auto 才算现代保比标准写法
相比 HTML 属性，CSS 控制更灵活，支持百分比、max-width、视口单位，且不会干扰 SSR 或爬虫对初始占位的判断。
- 推荐写法：
<img src="a.jpg" style="width: 100%; height: auto;">—— 宽度填满父容器，高度自动等比 - 加
max-width: 100%更稳妥：style="max-width: 100%; height: auto;"，避免父容器意外超宽时图片爆炸 - 注意：不要写
width: 100%; height: 100%，除非父容器有明确高度，否则height: 100%会失效或拉伸 - 如果用了
object-fit（如cover），height: auto就失效了——此时比例由容器决定，图只是被裁剪填入
响应式场景下，width/height 属性只是占位 fallback
当搭配 srcset 和 sizes 时，HTML 的 width/height 不再代表最终渲染尺寸，仅用于 SSR 阶段预留空间或低配浏览器降级。
- 例如：
<img src="small.jpg" srcset="big.jpg 2x" width="400" height="300">，在 2x 屏上浏览器可能加载big.jpg（800×600），但依然按 400×300 占位——导致模糊 - 真正防模糊，得让
width/height匹配所选资源的实际像素尺寸，这需要服务端注入元数据，或客户端用img.decode()拿到真实尺寸后再设样式 - 目前最实用的折中：用
aspect-ratio: 4 / 3（固定比值）+width: 100%，比attr()兼容性好，也比纯height: auto更稳占位
容易被忽略的是：所谓“保持比例”，其实依赖两个独立环节——HTML 属性或 CSS 规则负责声明意图，而浏览器是否能正确执行，取决于它有没有拿到真实的原始宽高比。一旦图片没传 EXIF、被 CDN 裁剪丢信息、或用了 WebP/AVIF 等新格式但解析不全，height: auto 就可能算错。这时候，服务端提供准确尺寸，比前端任何技巧都管用。
