只设 width 或只设 height 即可等比缩放，浏览器按原始宽高比自动推算缺失尺寸；若同时设死 width 和 height 则会拉伸变形；css 中推荐 max-width: 100% + height: auto 实现响应式等比缩放。
只设 width 或只设 height 就能等比缩放
浏览器会自动按原始宽高比推算缺失的尺寸，图片不会变形。比如原图是 1920×1080（16:9），写 <img src="a.jpg" style="max-width:90%">，高度就自动变成 225；反过来写 style="max-width:90%"，宽度就自动算出约 356。
常见错误是两个属性都写死却忽略比例，比如硬塞 width="300" height="300"，结果 16:9 的图被压成正方形，明显拉伸失真。
- 适用于头像、图标、邮件模板等静态场景，尺寸固定且可控
-
width和height值不带单位（width="300"正确，width="300px"是无效 HTML） - HTML5 中仍有效，但语义弱于 CSS，无法响应视口变化
width 和 height 属性会强制预留空间，影响页面加载流
设了这两个属性，浏览器能在图像加载前就分配好布局空间，避免图片载入时“突然顶开”下方内容——这是它最实在的价值。
但副作用也很直接：如果用它们来“缩小”大图（比如原图 4000×3000，只设 width="200"），用户仍得下载完整体积的文件，浪费带宽。
- 正确做法是提前用图像处理工具裁切/压缩到目标尺寸再上线
- 小技巧：用 1×1 像素 GIF 配合
width/height拉出彩色横条，节省资源 - 百分比值（如
width="60%"）可用，但仅对width有效；设height="50%"不生效（CSS 中才支持高度百分比）
CSS 的 max-width: 100% + height: auto 是响应式底线
这是目前兼容性最好（IE9+）、防崩能力最强的写法，尤其适合 CMS、文章页这类图片源不可控的场景。
关键点在于：max-width 是上限，图片本身小就不会被拉大；height: auto 才是保比例的核心，缺了它，哪怕写了 width: 100% 也可能拉伸变形。
- 必须确保父容器有明确宽度（比如
div { max-width: 1200px; }），否则100%无参照 - 别单独写
width: 100%—— 容器没限宽时，它可能撑满整个视口 - 加
display: block可消除图片底部默认的空白间隙
固定容器内填图，优先用 aspect-ratio 而非硬设 width/height
当图片必须放进一个固定尺寸卡片（比如 300×200 容器），又不想靠 JS 或 padding-trick 模拟比例时，现代方案是 aspect-ratio + object-fit。
例如：.card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } —— 浏览器自动算出高度，object-fit: cover 控制如何填满。
-
aspect-ratio已在 Chrome 88+、Firefox 89+、Safari 15.4+ 稳定支持 - 老浏览器兜底需用 padding-top 百分比 + 绝对定位，代码冗长且难维护
-
object-fit: contain适合要完整显示图片的场景，但会有留白
srcset 决定加载哪张图，width/height 或 CSS 才决定它最终怎么显示。这两层经常被混为一谈，但错配就会导致小屏加载大图、或大图被强行压缩失真。
