最有效方案是为设置max-width: 100%和height: auto，确保父容器有明确宽度、box-sizing为border-box，并在Flex/Grid中配合align-self或aspect-ratio避免缩放异常。
图片在 CSS 布局中不缩放、溢出容器怎么办
直接给 max-width: 100% 和 height: auto 是最基础也最有效的响应式图片方案。它能强制图片宽度不超过父容器，同时保持原始宽高比，避免拉伸变形。
常见错误是只写 width: 100% —— 这会导致图片强行撑满父宽，高度被忽略或按默认比例塌陷，尤其在移动端容易横向溢出或模糊。
-
max-width: 100%表示“最多占满父容器宽度”，图片本身比容器小时不会被放大 -
height: auto是关键：让浏览器自动按原始比例计算高度，否则高度为0或固定值会破坏比例 - 必须确保父容器有明确宽度（比如
div有width或处于流式布局中），否则max-width: 100%无意义
为什么设置了 max-width 100% 图片还是不缩放
多数情况是父级元素没形成有效宽度上下文。例如： 另一个高频原因是图片加载前 DOM 已渲染，而浏览器对未加载图片的 立即学习“前端免费学习笔记（深入）”； 必须配合 在 Grid 中同理：若图片放在未定义 display: block，但若它被设为 position: absolute、float: left 或没有设置 width，又或者外层是 flex / grid 容器但未约束尺寸，max-width: 100% 就会失效。
height 推算不准，导致布局抖动或缩放异常 —— 此时需配合 aspect-ratio 或显式 height 占位。
overflow: hidden + height: 0 类似 hack，会干扰 height: auto 的计算flex 子项，确认没设置 flex-shrink: 0，否则图片可能拒绝缩小响应式图片需要适配不同 DPR 怎么办
max-width: 100% 只解决尺寸缩放，不解决像素密度问题。高 DPR 设备（如 iPhone Retina）上，1px CSS 宽度可能对应 2~3 物理像素，此时单倍图会模糊。srcset 和 sizes 属性，由浏览器根据设备 DPR 和视口宽度选择合适分辨率的图片资源。@@##@@
srcset 提供多分辨率资源，1x/2x/3x 是设备像素比标识sizes 告诉浏览器“在不同断点下，这张图将占用多少视口宽度”，影响资源选择srcset，高 DPR 下永远只能加载低分图Flex 或 Grid 布局中图片缩放异常的典型场景
display: flex 容器里，子元素默认会拉伸（align-items: stretch），如果图片父容器是 flex item，且未设置 align-self: flex-start 或类似控制，图片高度可能被 flex 容器强制拉高，覆盖 height: auto 效果。grid-template-rows 的区域，行高可能由内容撑开，但若设置了固定行高（如 100px），就会截断或挤压图片。
实际项目中最容易被忽略的是：图片容器的 box-sizing 是否为 align-self: flex-start
aspect-ratio 配合 object-fit: cover 控制裁剪，而非依赖 height: auto
height: auto 必须和 max-width: 100% 成对出现，单独用任一者都不可靠border-box，以及 padding/margin 是否意外撑大了可用空间——这些细节会让 max-width: 100% 看起来“没生效”。
