图片容器需设width: 100%，图片设width: 100%; max-width: 100%; height: auto；max-width防溢出，width确保小图占满；多图推荐flex或grid布局；响应式还需srcset等配合加载优化。
图片容器用百分比宽度，但图片本身不缩放
常见错误是只给 <img alt="css布局如何实现响应式图片排布_使用百分比宽度和max-width" > 设置 width: 100%，却没管父容器。如果父容器是固定宽（比如 div { width: 300px }），那图片确实会缩放；但如果父容器本身没设宽或设了 width: auto，100% 就失去参照，图片可能溢出或按原尺寸渲染。
正确做法是让图片的直接父容器承担布局责任：
- 给包裹
<img alt="css布局如何实现响应式图片排布_使用百分比宽度和max-width" >的<div> 或 <code><figure></figure>设width: 100%（或max-width: 100%） -
<img alt="css布局如何实现响应式图片排布_使用百分比宽度和max-width" >自身设width: 100%+height: auto，强制等比缩放 - 必须加
max-width: 100%到<img alt="css布局如何实现响应式图片排布_使用百分比宽度和max-width" >，否则在小屏下可能撑破容器（尤其当图片原始尺寸远大于视口时）
为什么 max-width: 100% 比 width: 100% 更安全
width: 100% 是强制拉满，哪怕图片只有 50px 宽，也会被拉到容器全宽，导致模糊；而 max-width: 100% 是“最多不超过容器宽度”，图片小就保持原样，大才缩放——这才是响应式要的效果。
典型写法：
立即学习“前端免费学习笔记（深入）”；
<div class="img-wrap"> <img src="photo.jpg" alt="..."> </div>
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))，更语义化且自动适配列数 - 无论哪种，每张图仍需单独套一层容器，并在
<img alt="css布局如何实现响应式图片排布_使用百分比宽度和max-width" >上保持width: 100%; max-width: 100%; height: auto
移动端图片加载和性能常被忽略的点
光靠 CSS 缩放不能解决实际问题：大图在手机上仍会完整下载，浪费带宽、拖慢首屏。
必须配合：
-
<picture></picture>+<source media></source>提供不同分辨率源 - 或至少用
srcset和sizes属性，例如：<img src="small.jpg" srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw" alt="css布局如何实现响应式图片排布_使用百分比宽度和max-width" > - CSS 的
max-width只管显示，不管加载——这点最容易被当成“已经响应式了”而跳过优化
