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