仅写 width 或 height 可触发浏览器自动等比缩放，依据图片原始宽高比补全缺失值；若同时指定两者则强制拉伸，易引发cls；推荐用 style="max-width:100%;height:auto" 实现响应式等比缩放。
只写 width 或只写 height 就能等比缩放
浏览器会读取图片原始宽高比（来自 EXIF 数据或下载后解析），自动补全缺失尺寸，不拉伸、不变形。比如原图是 1200×800，写 <img src="a.jpg" style="max-width:90%">，高度就自动算出 400；反过来写 style="max-width:90%"，宽度就自动变成 300。
常见错误是后端渲染时硬塞了不匹配的 width 和 height，比如图实际是 4:3，却写成 width="300" height="300"，结果明显压扁。
-
width和height属性值不能带单位——width="300px"会被浏览器忽略，必须写width="300" - 这个行为是 HTML 原生机制，不依赖 CSS 或 JS，IE6 都支持
- 若原始图 EXIF 被裁剪工具清空或写错，自动推算的尺寸就会失准
同时写死 width 和 height = 强制拉伸
浏览器完全无视原始比例，按你写的像素值硬套。不是“控制显示”，而是“覆盖原始信息”。典型场景是设计稿直接抄数：<img src="x.jpg" style="max-width:90%" style="max-width:90%"> 插入一张 1200×800 的图，加载前占位 600×400，图一加载完立刻撑开——触发 CLS（累积布局偏移）。
- 仅适合图标、按钮内嵌小图等有严格容器约束的场景
- 真要用，建议提前用 ImageMagick 或 Sharp 工具批量缩放原图，再写属性
- 别指望浏览器实时缩放大图，低端设备可能卡顿，SEO 也可能因尺寸与内容不符被降权
响应式页面推荐用 style="max-width: 100%; height: auto;"
这是现代实践里最稳妥的写法：max-width: 100% 防止溢出父容器，height: auto 保证等比缩放。比单纯 width: 100% 更安全——小图不会被无谓拉伸。
- 必须配
height: auto，否则高度不自动计算，可能截断或撑开布局 - 如果父容器用了
display: flex或grid，记得检查是否设置了align-items: stretch，它会干扰height: auto行为 - 和 HTML
width/height属性混用时，CSS 会覆盖 HTML 属性，但若写了img { height: 100% }，HTML 的自动推算就彻底失效
别踩这些坑：单位、父容器、CSS 冲突
看似简单，实操中三个地方最容易翻车：
-
width="300px"是无效写法，浏览器当字符串处理，直接忽略——只接受纯数字 - 父容器宽度不可控（比如
width: fit-content或浮动布局），width="300"仍固定 300px，可能溢出 - CSS 里写了
img { height: 100% }或max-height: 200px，会切断 HTML 层的自动高度推算链
原始宽高比不准、父容器响应式变窄、CSS 和 HTML 属性打架——这三个问题叠加时，图片表现就完全不可预测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
