图片在响应式布局中不缩放的主因是固定宽高、默认行内间隙或父容器限制；解法为 max-width: 100% + height: auto，设 display: block 消除间隙，并确保父容器支持弹性缩放。
图片在响应式布局中不缩放，通常是因为设置了固定宽高、未重置默认行为，或父容器限制导致。核心解法是用 max-width: 100% 配合 height: auto，让图片随容器自适应缩放，同时保持宽高比。
确保图片宽度不突破父容器
给图片设置最大宽度为 100%，浏览器会自动将其缩放到父容器宽度内，不会溢出：
img {max-width: 100%;
height: auto;
}
注意不要同时设 width: 100% 和 max-width: 100%——前者强制拉伸，后者才保留“不大于”的弹性约束。
清除图片的默认行内对齐间隙
图片默认是 vertical-align: baseline，可能引发底部多余空白，影响布局表现。加上以下任一即可修复：
立即学习“前端免费学习笔记（深入）”；
-
display: block;（最常用） vertical-align: top/middle/bottom;-
font-size: 0;在父容器上（慎用，影响文字）
处理父容器的尺寸限制问题
即使图片样式正确，若父元素（如 div、figure）有固定宽高、overflow: hidden 或 flex/grid 的刚性设置，也会阻碍缩放。检查并调整：
- 父容器避免写死
width或min-width - Flex 项目加
flex-shrink: 1，允许压缩 - Grid 项避免
min-width: auto（默认值，会阻止收缩）
适配高清屏（可选增强）
对 retina 屏，可用 srcset 提供多倍图，配合 CSS 缩放更清晰：
srcset="photo@2x.jpg 2x, photo@3x.jpg 3x"alt="示例">
此时仍需保留 max-width: 100% 和 height: auto，否则高倍图可能撑破布局。
