直接用width和height属性最稳妥，以像素为单位预留布局空间防抖动，但不支持百分比或auto；响应式应优先用css的max-width:100%和height:auto保持比例，现代场景可结合aspect-ratio与object-fit。
直接用 width 和 height 属性最简单，但仅适用于静态、已知尺寸的场景；真要兼顾响应式、性能和语义，必须用 CSS 配合 max-width、height: auto 或现代 aspect-ratio。
只改 width 或 height 一个属性会怎样
浏览器自动按原始宽高比推算另一个值，图片不会变形。比如 <img src="a.jpg" style="max-width:90%">，高度由原始比例决定；反之亦然。
常见错误是两个都写死却忽略原始比例，导致拉伸模糊——尤其当原图是 16:9，你硬设成 width="300" height="300" 就会明显失真。
- 适用场景：头像、图标、邮件模板等需要像素级控制的静态内容
- 注意：
width和height的值不带单位（如width="300"正确，width="300px"是无效 HTML） - HTML5 中这两个属性仍有效，但语义弱于 CSS，且无法响应视口变化
max-width: 100% + height: auto 是响应式底线
这是目前最通用、兼容性最好（IE9+）、且防崩的写法。它确保图片在窄屏里不溢出容器，同时保持比例。
例如：
img {
max-width: 100%;
height: auto;
}
- 不要用
width: 100%单独写——如果父容器没设宽，它可能撑满整个视口，反而破坏布局 -
max-width是“上限”，图片小的时候不会被强行拉大；height: auto是关键，缺了它比例就保不住 - 对文章页、CMS 内容区这类不可控图片源的场景，这是必须加的基础样式
固定容器内保持比例：用 aspect-ratio 还是 object-fit
当图片必须放进一个固定尺寸的卡片或网格项（比如 300×200 容器），且要防止高度塌陷或裁剪失控，优先选 aspect-ratio。
例如：
.card img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
-
aspect-ratio: 16 / 9让浏览器自动算出高度，无需 JS 或 padding-trick，现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）已稳定支持 -
object-fit: cover控制图片如何填满该比例区域；若需完整显示用contain，但会有留白 - 老浏览器兜底方案：用
padding-top百分比模拟比例容器，再把图片绝对定位进去——但代码冗长，维护成本高
srcset 和 sizes 不是“调大小”，而是“选对大小”
很多人误以为加了 srcset 就能控制显示尺寸，其实它只影响**加载哪张图**，不改变渲染尺寸。最终显示多大，还是靠 CSS 或 width/height。
典型错误：<img src="small.jpg" srcset="big.jpg 2x" style="max-width:90%"> —— 这里 width="200" 强制渲染为 200px，但高 DPR 设备会加载 big.jpg，然后缩放到 200px 显示，白白浪费带宽。
- 正确配合方式：去掉内联
width/height，全交给 CSS 控制尺寸，srcset只负责提供不同分辨率资源 -
sizes必须配srcset使用，否则浏览器无法预判渲染宽度，可能选错图 - 真正省流量的关键，是让服务器返回合适尺寸的图，而不是靠前端缩放
最容易被忽略的是：所有这些设置都只影响“显示尺寸”，不改变文件体积。一张 5MB 的 PNG，哪怕用 width="50" 缩成小图，照样下载 5MB。优化起点永远是压缩和格式选择（WebP/AVIF），不是 HTML 或 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
