最简解是给加max-width: 100%并配合height: auto和display: block，Flex布局中还需min-width: 0，Grid中宜用width: 100%+height: auto兜底，Retina屏需srcset适配。
图片超出容器时被裁剪或溢出怎么办
直接给 <img alt="CSS如何实现响应式图片布局_利用max-width属性保持自适应" > 加 max-width: 100% 是最简解，但必须配合 height: auto，否则宽高比会崩。浏览器默认把图片当内联元素处理，换行符和空格会产生底部间隙，加 display: block 能干掉它。
-
max-width: 100%只对「宽度可变」的父容器生效；如果父容器本身没设宽（比如div在 flex 或 grid 中未定义尺寸），图片可能不缩放 - 别只写
width: 100%—— 它会让小图强行拉伸模糊，max-width才是“不超父容器、也不压低原图质量”的关键 - 移动端 Safari 对
max-width+height: auto的组合偶尔有渲染延迟，加vertical-align: middle可缓解
在 Flex 布局里图片不收缩或错位
Flex 容器默认启用 flex-shrink: 1，但图片作为替换元素，其固有尺寸会干扰收缩逻辑。必须显式告诉浏览器：“这张图允许压缩”，靠的是 min-width: 0。
- 只加
max-width: 100%不够，Flex 子项默认min-width: auto，会阻止缩小到小于内容尺寸 - 正确写法：
img { max-width: 100%; height: auto; min-width: 0; } - 如果图片在
flex-direction: column里垂直堆叠，还要检查父容器有没有align-items: stretch导致图片被横向撑满
Retina 屏下图片模糊或加载两遍
max-width 本身不解决高清屏适配，它只管布局。模糊是因为你用了 1x 图源却被渲染成 2x 像素密度；加载两遍常因 srcset 和 CSS 尺寸没对齐。
- 用
srcset提供多倍图：<img src="a.jpg" srcset="a@2x.jpg 2x, a@3x.jpg 3x" alt="CSS如何实现响应式图片布局_利用max-width属性保持自适应" > - 确保 CSS 中
max-width: 100%的父容器宽度是设备独立像素（device-independent pixels），不是物理像素 —— 浏览器会自动按window.devicePixelRatio缩放，你不用干预 - 避免同时用
background-image+max-width：背景图不响应max-width，得靠background-size: contain或cover
图片在 Grid 布局中塌陷或撑开网格线
Grid 项默认按内容尺寸分配空间，而 max-width 是“最大允许宽度”，不是“目标宽度”。如果网格轨道用 fr 单位，图片仍可能撑大整行。
立即学习“前端免费学习笔记（深入）”；
- 给图片加
width: 100%（不是max-width）+height: auto，强制填满轨道 —— 这时max-width才起兜底作用 - 网格容器若设了
grid-auto-rows: minmax(0, 1fr)，能防止图片高度失控；单用1fr会导致最小高度被图片原始尺寸锁定 - 注意
object-fit：它不影响布局尺寸，只控制图片如何适应容器，object-fit: cover常导致裁剪，contain则留白
真正麻烦的不是写那行 max-width: 100%，而是它依赖的上下文：父容器是否真的有可参考的宽度、是否在弹性布局中被其他规则覆盖、图片是否带内联尺寸属性（width/height HTML 属性）。这些地方一漏，样式就失效得毫无征兆。
