最稳起点是max-width: 100% + height: auto，但真实项目还需Grid布局适配列数、srcset/sizes按需加载图片、aspect-ratio统一宽高比、onerror兜底及四者协同对齐。
直接给结论：用 max-width: 100% + height: auto 是最稳的起点，但仅靠它撑不起真实项目——图片拉伸、留白错位、高DPI屏糊图、加载慢等问题会立刻浮现。
img 标签必须加的两个 CSS 规则
几乎所有响应式图片失效，都源于漏掉其中一条：
-
max-width: 100%：限制图片宽度不超出父容器，否则在小屏上横向溢出 -
height: auto：强制按原始宽高比缩放；缺了它，图片会被压扁或拉长
别写 width: 100% ——它会强制拉伸，破坏比例。也别依赖 display: block 来“清空底部空白”，那是治标不治本；真正该做的是在父容器上设 font-size: 0 或用 vertical-align: top 控制行内对齐。
Grid 布局实现自动列数适配（不用媒体查询）
用浮动或 calc(100% / 3) 写三列，在屏幕变窄时会直接崩成一列堆叠，且最后一行常有空隙。现代解法是 Grid：
立即学习“前端免费学习笔记（深入）”；
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 12px;
}
关键点：
-
minmax(250px, 1fr)表示每列最小 250px，有空间就等分剩余宽度 -
auto-fit会让空列自动收缩，填满整行；换成auto-fill会保留空列占位 -
gap必须用，别用margin模拟间距——否则网格对齐逻辑失效
IE10+ 可用 grid-column-gap 和 grid-row-gap 替代 gap。
srcset + sizes 让浏览器选图，不是你猜设备
只靠 CSS 缩放，手机仍会下载桌面尺寸大图，浪费带宽。必须让浏览器自己决策：
<img
src="photo-small.jpg"
srcset="photo-small.jpg 480w,
photo-medium.jpg 768w,
photo-large.jpg 1200w"
sizes="(max-width: 480px) 100vw,
(max-width: 768px) 50vw,
33vw"
alt="风景照">
注意：
-
src是降级 fallback，浏览器不支持srcset时才用它 -
sizes描述的是“这张图在视口里实际占多宽”，不是“我想让它多宽” - 单位必须用
w（像素宽度）和vw（视口百分比），不能混用px或%
没配 sizes？浏览器默认按 100vw 选图，大概率选大了。
图片变形、留白、加载失败的三个隐藏雷区
这些不报错，但用户一眼就能感知体验崩了：
- 图片宽高比不一致 → 用
aspect-ratio: 4/3统一容器比例，或外层套div+overflow: hidden - 最后一行图片下方留白 → 确保父容器没多余
line-height或font-size，figure包裹比裸img更可控 - 图片路径错或 404 → 加
onerror="this.src='placeholder.svg'"，开发时跑Array.from(document.images).filter(i => i.naturalWidth === 0)扫描失败项
真正难的不是写出能缩放的图片，而是让每张图在任意设备、任意网络、任意加载状态下，都不失真、不空白、不卡顿——这需要 CSS、HTML 属性、资源命名、部署路径四者对齐，缺一不可。
