图片容器需设width: 100%，图片设width: 100%; max-width: 100%; height: auto；max-width防溢出，width确保小图占满；多图推荐flex或grid布局；响应式还需srcset等配合加载优化。
图片容器用百分比宽度，但图片本身不缩放
常见错误是只给 width: 100%，却没管父容器。如果父容器是固定宽（比如 div { width: 300px }），那图片确实会缩放；但如果父容器本身没设宽或设了 width: auto，100% 就失去参照，图片可能溢出或按原尺寸渲染。
正确做法是让图片的直接父容器承担布局责任：
- 给包裹
width: 100%（或max-width: 100%）width: 100%+height: auto，强制等比缩放- 必须加
max-width: 100%到为什么 max-width: 100% 比 width: 100% 更安全
width: 100%是强制拉满，哪怕图片只有 50px 宽，也会被拉到容器全宽，导致模糊；而max-width: 100%是“最多不超过容器宽度”，图片小就保持原样，大才缩放——这才是响应式要的效果。典型写法：
立即学习“前端免费学习笔记（深入）”；
@@##@@CSS：
.img-wrap { width: 100%; } .img-wrap img { width: 100%; max-width: 100%; height: auto; }注意：这里
width: 100%和max-width: 100%同时存在不是冗余——前者确保小图也能占满容器宽度（比如网格中对齐需要），后者兜底防溢出。多图并排时，百分比宽度 + flex 或 grid 更可靠
纯靠
float或display: inline-block配合百分比，在不同浏览器里容易因空白字符或盒模型差异导致换行错位。推荐方案：
- 用
display: flex父容器 +flex: 0 0 calc(33.333% - 20px)控制单图宽度（减去间距） - 或用
display: grid，如grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，更语义化且自动适配列数 - 无论哪种，每张图仍需单独套一层容器，并在
width: 100%; max-width: 100%; height: auto
移动端图片加载和性能常被忽略的点
光靠 CSS 缩放不能解决实际问题：大图在手机上仍会完整下载，浪费带宽、拖慢首屏。
必须配合：
-
- 或至少用
srcset和sizes属性，例如： - CSS 的
max-width只管显示，不管加载——这点最容易被当成“已经响应式了”而跳过优化
