只设 width 或 height 才能等比缩放：html 的 width/height 属性不支持比例缩放，但浏览器会根据原始宽高比自动推算缺失值；若两者都设则强制拉伸失真，且值不可带单位或对 height 使用百分比。
只设 width 或 height 才能等比缩放
HTML 的 width 和 height 属性本身不支持“比例缩放”，但浏览器会按原始宽高比自动推算缺失值——前提是只写一个：width="400" 或 height="200"，不能两个都写死。
常见错误是同时设 width="300" height="300"，结果 16:9 的图被硬压成正方形，明显拉伸失真。
-
width和height值不带单位（width="300"正确，width="300px"是无效 HTML） - 百分比只对
width有效（width="60%"可用，height="50%"不生效） - 设了这两个属性，浏览器能在图片加载前就预留布局空间，避免内容“突然顶开”——这是它唯一不可替代的价值
- 副作用也很直接：用户仍得下载原图完整体积，比如
width="200"对一张 4000×3000 的图毫无压缩作用
max-width: 100% + height: auto 是响应式底线
真正安全、可预测的等比缩放，必须用 CSS：max-width: 100% 和 height: auto 缺一不可。前者限制宽度上限，后者让浏览器按原始比例反推高度。
单独写 width: 100% 是 90% 图片变形的根源——宽度被拉满，高度却没联动。
- 父容器必须有明确宽度参照（比如
max-width: 1200px或width: 100%），否则max-width: 100%失效 - Flex/Grid 容器中，
img默认带min-width: auto，会锁死原始尺寸；需在父容器上加min-width: 0 - 删掉 HTML 中所有
width=和height=内联属性，否则会覆盖height: auto - 顺手加
display: block可消除图片底部默认空白间隙
固定容器里别硬缩，用 object-fit + aspect-ratio
当图片必须放进一个宽高都固定的区域（比如 300×200 卡片），max-width: 100%; height: auto 会留白或溢出——这时该换方案。
object-fit 不是缩放，而是“怎么塞进固定框里”。它需要容器先有明确宽高，再配合 aspect-ratio 自动算高度。
- 写法示例：
.card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } -
object-fit: cover裁剪填满，object-fit: contain等比居中留白 - IE 完全不支持
object-fit，老版 iOS Safari（≤12.5）需加-webkit-object-fit: cover - 不要把
object-fit: contain当作响应式缩放主力——它依赖固定尺寸容器，对正文插图、头像这类语义化图片反而更易失控
srcset 和 sizes 不是可选项
仅靠 CSS 缩放，大图小屏显示时仍会下载整张高清图，浪费带宽且拖慢首屏。真正可控的缩放，必须配合资源层面优化。
srcset 提供多尺寸源，sizes 告诉浏览器“这张图在不同视口下打算占多宽”，两者缺一不可，否则可能加载错图导致缩放异常。
- 基础写法：
<img src="a-400.jpg" srcset="a-400.jpg 400w, a-800.jpg 800w, a-1200.jpg 1200w" sizes="(max-width: 768px) 100vw, 800px"> - 如果只写
srcset不配sizes，浏览器默认按 100vw 计算，可能在桌面端也加载小图 - 服务端生成不同尺寸图是前提；CSS 缩放只是客户端兜底，不是替代方案
width/height 的冲突——它们往往藏在 CMS 输出或旧模板里，表面看样式写了 max-width: 100%，结果就是不生效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
