只写 width 或 height 可触发浏览器自动等比缩放，依据原图宽高比推算缺失值，但需避免单位、exif错误、css冲突；max-width:100%+height:auto 是最兼容且防cls的响应式方案。
只写 width 或只写 height 就能等比缩放
浏览器会读取图片原始宽高比（来自 EXIF 或加载后解析），自动推算缺失尺寸。比如原图是 16:9，写 <img src="a.jpg" style="max-width:90%">，高度就自动变成 225；反过来写 style="max-width:90%"，宽度也按比例算出约 356。
这个行为在所有现代浏览器和 IE9+ 都一致，不依赖 CSS 或 JS。但要注意：width="400" 有效，width="400px" 是无效 HTML——属性值不能带单位。
- 适用场景：CMS 输出的正文图、邮件模板、SSR 需要占位的静态内容
- 风险点：原图 EXIF 宽高比被裁剪工具清空或错误，会导致自动计算失准
- 别和 CSS 冲突：如果写了
img { height: 100%; }，HTML 的自动推算就失效
max-width: 100% + height: auto 是响应式底线
这是目前最通用、兼容性最好（IE9+）、且防布局偏移（CLS）的写法。它让图片在窄屏里不溢出容器，同时保持原始比例。
关键点：max-width: 100% 是“上限”，小图不会被拉大；height: auto 是必须项，缺了它比例就保不住——尤其当图片被缩小时，高度可能塌陷或卡死。
- 别用
width: 100%单独写：父容器若没设宽（比如display: inline），它可能撑破布局 - 如果父容器是 Flex/Grid，默认
min-width: auto会锁死图片收缩，得给父元素加min-width: 0 - 避免同时写内联
width/height和这个 CSS，二者冲突会导致不可预期行为
同时写死 width 和 height = 强制拉伸
浏览器完全无视原始比例，强行缩放到你写的像素值。这不是“控制大小”，而是覆盖原始信息。常见于设计稿直接抄数：width="600" height="400" 插入一张 1200×800 的图，结果加载前占 600×400 空间，图一加载完立刻撑大——造成 CLS。
- 仅适合图标、按钮内嵌小图等有明确容器约束的场景
- 建议提前用工具统一缩放原图再写属性，而非靠浏览器实时缩放
- 典型错误：Markdown 渲染器后端没传原始尺寸，硬塞的
width/height和实际图不符
固定容器里用 aspect-ratio + object-fit
当容器宽高固定（比如卡片封面），而图片比例不匹配时，CSS 默认会拉伸。这时要用 aspect-ratio 预设容器比例，再用 object-fit 控制填充方式。
例如：<div class="cover"><img src="a.jpg"></div>，配 CSS：.cover { aspect-ratio: 16/9; } .cover img { width: 100%; height: 100%; object-fit: cover; }
-
cover：等比缩放填满，溢出部分裁掉（类似背景图background-size: cover） -
contain：等比缩放全部显示，留白 -
fill：直接拉伸填满（慎用，就是默认行为） - 注意：
object-fit对<img>有效，但对<picture></picture>内的<source></source>无效
width 和 height 往往不够——尺寸变化、设备像素比、网络条件、语义化需求都得一起考虑，漏掉任意一环，就可能在某个机型上出白边、模糊或卡顿。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
