img 响应式必须设 max-width:100% 和 height:auto；flex/grid 中还需 min-width:0；高清图需 srcset+sizes 优化加载。
img 标签默认不响应式，会直接撑破容器
浏览器对 <img> 的默认行为是“按原始尺寸渲染”，哪怕图片宽 3000px，它也照常铺满——小屏上必然横向滚动。这不是 bug，是规范行为；CSS 不会自动帮你缩放，除非你明确告诉它“别超过父容器”。
常见错误现象：max-width: 100% 没加、或加在了父容器上而不是 <img> 自身；或者用了 width: 100% 却没配 height: auto，导致图片被拉伸变形。
- 必须给
<img>元素本身设置max-width: 100%和height: auto - 父容器不能有固定
width或overflow: hidden干扰（比如某些 CMS 自动生成的 wrapper） - 如果图是背景图，那得换思路：用
background-size: contain或cover，不是改<img>
保持宽高比的关键是 height: auto，不是 object-fit
object-fit 看起来很美，但它是“裁剪 / 缩放内容区域”，不改变图片原始尺寸占用空间。比如 object-fit: contain 虽然能居中显示完整图，但外层盒子仍按原图尺寸占位，小屏照样溢出。
真正保比例且不溢出的唯一可靠组合，就是 max-width: 100% + height: auto。浏览器会按宽度约束反推高度，天然维持原始比例。
立即学习 “ 前端免费学习笔记（深入）”；
-
height: auto是必须项，漏掉就会失真或空白 -
object-fit只适用于<img>作为替换元素嵌入容器时的内部对齐（比如卡片内统一高度裁图），不是响应式方案 - 如果容器本身有
aspect-ratio，要小心：它和height: auto可能冲突，优先级取决于是否设了height
高清图（2x/3x）需配合 srcset，否则小屏也加载大图
只解决“不溢出”还不够——用户手机上加载一张 4K 图，浪费流量、拖慢首屏。必须让浏览器根据设备像素比和视口宽度，自动选更小的源。
单纯用 width/height 属性或 CSS 缩放，不会减少下载体积。真实带宽优化靠 srcset + sizes。
- 写法示例：
<img src="small.jpg" srcset="small.jpg 480w, medium.jpg 1024w, large.jpg 2048w" sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 33vw"> -
sizes告诉浏览器“这张图在不同断点下大概占多宽”，浏览器据此从srcset里挑最接近的资源 - 不要只依赖 JavaScript 检测屏幕尺寸切换
src——不触发预加载，首屏仍载大图
Flex/Grid 容器里 img 溢出，常因 min-width 默认为 auto
把 <img> 放进 display: flex 或 grid 容器时，即使写了 max-width: 100%，仍可能溢出。原因是：flex item 默认 min-width: auto，会阻止收缩到小于内容尺寸（即图片原始宽）。
这不是图片的问题，是 flex 布局的默认守则——它优先保内容完整性，而非容器边界。
- 解决方法：给
<img>加min-width: 0（或flex-shrink: 1） - Grid 中同理，若父容器是
grid，子项需显式设min-width: 0才服从max-width - 这个坑特别隐蔽：开发时在桌面看没问题，一到手机就横向滚动，查半天才发现是 flex 把图片“卡住”了
实际项目里最容易被忽略的，是 flex 容器中那个 min-width: 0。它不报错、不警告，只是悄悄让响应式失效。
