最可靠写法是max-width: 100% + height: auto；只设width属性时浏览器自动按原图比例计算height，避免失真；max-width限制上限防溢出，height: auto保比例；固定容器推荐aspect-ratio+object-fit。
直接用 width 和 height 属性最简单，但容易拉伸失真；真要兼顾响应式、清晰度和布局稳定，得靠 CSS 的 max-width: 100% + height: auto 组合——这是目前最可靠、兼容性最好、也最容易被忽略的底线写法。
只写 width 属性却没设 height，浏览器怎么算高度？
浏览器会按图片原始宽高比自动推算 height 值，不加任何 JS 或额外样式也能保持比例。比如原图是 800×600（4:3），你只写 width="400"，浏览器就自动设 height="300"。
- 这个行为在所有现代浏览器和 IE9+ 都一致，无需担心兼容问题
- 如果原图宽高比未知（比如 CMS 后台随便传的图），单独设
width比两个都硬写更安全 - 别写
width="400px"——HTML 属性值里带px是无效的，只写数字width="400"
max-width: 100% 和 width: 100% 差在哪？
width: 100% 强制填满父容器，但父容器若没明确宽度（比如 display: inline 的 <span></span>），它可能撑破布局；max-width: 100% 是“上限”，图片小的时候不会被拉大，只在超出时才缩放。
- 必须配
height: auto，否则比例保不住，尤其当图片被缩小时 - 对文章正文、用户上传内容等不可控来源，这是防崩的第一道防线
- 写成
img { max-width: 100%; height: auto; }就够了，不用每张图都加 style
要在固定尺寸容器里塞图，又不想留白或拉伸？
用 aspect-ratio + object-fit 最干净。比如卡片要求统一 300×200 区域，但图片源尺寸五花八门。
-
aspect-ratio: 16 / 9让浏览器自动算出高度，不用 padding-top 技巧 -
object-fit: cover等比缩放并裁剪，适合封面图；object-fit: contain完整显示但可能有空白 - 老浏览器（Chrome aspect-ratio，得用 padding-bottom + absolute 定位兜底
srcset 和 sizes 是不是也能调大小？
不能。srcset 只决定「加载哪张图」，不影响渲染尺寸。比如 srcset="small.jpg 480w, large.jpg 1024w"，浏览器选完图之后，还是得靠 width/height 或 CSS 控制它最终占多大地方。
- 常见错误：加了
srcset就以为图片会自适应，结果在手机上还是溢出容器 - 正确配合方式：先用
max-width: 100%控制渲染尺寸，再用srcset优化加载资源 -
sizes要配合媒体查询写，比如sizes="(max-width: 768px) 100vw, 50vw"，否则srcset选图逻辑会失效
真正难的不是写哪一行代码，而是判断当前场景该信 HTML 属性、还是信 CSS、还是两者都用——比如邮件模板必须用 width/height（很多客户端不支持 CSS），而 CMS 内容页必须用 max-width + height: auto，哪怕多加一行全局样式也值得。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
