只设 width 或 height 才能等比缩放，浏览器依原图宽高比自动补全缺失值；设两者会强制拉伸变形；响应式推荐 max-width: 100% + height: auto；固定容器优先用 aspect-ratio + object-fit。
只设 width 或只设 height 才能等比缩放
浏览器会读取图片原始宽高比，自动补全缺失尺寸——比如原图 1200×800，写 <img src="a.jpg" style="max-width:90%">，高度就自动算出 400；反过来写 style="max-width:90%"，宽度就是 300。这是 HTML 原生行为，无需 CSS。
常见错误是两个属性都写死：<img style="max-width:90%" style="max-width:90%">，不管原图比例，强行拉伸变形。尤其在头像、邮件模板等静态场景里，这种写法容易一眼看出人脸被压扁。
-
width和height的值不带单位（width="300"正确，width="300px"是无效 HTML） - 百分比只对
width生效（width="60%"可用，height="50%"不生效） - 设了这两个属性，浏览器能在图片加载前预留布局空间，避免“内容突然下移”，这是它最实在的价值
- 但副作用明显：大图只设
width="200"，用户仍得下载完整体积，浪费带宽
max-width: 100% + height: auto 是响应式底线
现代页面必须用这个组合，不是可选项。单独写 max-width: 100% 不够，高度不会自动联动，90% 的变形都出在这里。
它的工作逻辑很直接：max-width: 100% 表示“最多不超父容器”，height: auto 让浏览器按原始宽高比反推高度。小图保持原尺寸，大图才缩放，自然不拉伸。
- 必须确保父容器有明确宽度（比如
div { max-width: 1200px; }），否则100%没参照，图片可能撑满视口 - 别单独写
width: 100%——它强制拉满，小图会被撑宽失真 - 如果父容器是 flex 或 grid，默认
min-width: auto会卡住图片，需额外加min-width: 0 - 图片若有内联
width或height属性，会覆盖height: auto，务必删掉
固定容器里填图，优先用 aspect-ratio + object-fit
当图片必须放进一个宽高都固定的盒子（比如卡片封面 300×200），max-width + height: auto 会留白或溢出，这时该换思路。
现代方案是让容器控制比例，图片负责填充：.card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }。浏览器自动算出高度，object-fit: cover 控制裁剪方式。
-
aspect-ratio兼容性要注意：Chrome 88+、Firefox 89+、Safari 15.4+ 支持；旧版需 fallback 到 padding-top trick 或 JS -
object-fit: contain适合需要完整显示的场景（如图标），cover适合封面类（如文章配图） - IE 完全不支持
object-fit，必须用background-image方案 fallback - 老版 iOS Safari（≤12.5）要加
-webkit-object-fit: cover
别用 max-height: 100% 替代 height: auto
有人试过 max-width: 100%; max-height: 100%，以为能双限，结果常出问题：图片可能被压缩成一条细线，或在 flex 容器里完全消失。
因为 max-height: 100% 的“100%”同样依赖父容器高度，而多数父容器没设 height，导致计算值为 0。这不是 bug，是 CSS 百分比高度的固有限制。
- 真要控高上限，用
max-height: 200px; height: auto; width: auto;——width: auto必须显式写出，否则旧版 Safari 可能误判 -
object-fit不是等比缩放的替代品，它只在图片已有固定宽高时起作用，本质是“怎么塞进框里”，不是“怎么缩放” - 所有方案都绕不开一个前提：清除内联
width/height、确保父容器有宽度约束、检查是否被框架样式覆盖（比如 Bootstrap 的img { max-width: none; }）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
