响应式图片弹性核心是max-width: 100%配合height: auto实现等比缩放，防溢出且保比例；容器需width: 100%、max-width限制与margin: 0 auto居中；Flex/Grid中须设min-width: 0防撑开；完整方案还需srcset与sizes适配多分辨率。
用 max-width 让图片和容器具备弹性，核心是“设上限、不锁死、有参照”，不是简单加个数值就完事。它必须配合其他属性才能真正响应不同屏幕。
图片弹性：max-width: 100% + height: auto 是黄金组合
单独写 max-width: 100% 只能防溢出，但容易拉伸变形；加上 height: auto 才能保持原始比例，实现等比缩放：
-
max-width: 100%表示图片最大宽度不超过父容器，小屏自动缩小，大屏不强行拉宽 -
height: auto让浏览器按原始宽高比自动计算高度，避免固定高度导致的压扁或拉长 - 千万别用
width: 100%替代——它会强制撑满，小图也会被拉糊 - 内联的
width或height属性（如<img width="600">）会覆盖 CSS 规则，务必删掉
容器弹性：max-width 需搭配 width 和 margin 才生效
只给容器写 max-width: 1200px 是无效的，因为块级元素默认 width: auto，仍会占满父级。正确写法是：
-
width: 100%：让容器始终尝试占满可用空间 -
max-width: 1200px：在大屏下限制最大宽度，防内容过散 -
margin: 0 auto：实现水平居中（前提是容器在常规文档流中） - 记得全局设置
box-sizing: border-box，否则 padding 和 border 会额外加宽，突破 max-width
Flex/Grid 布局中特别注意 min-width 干扰
在 display: flex 或 display: grid 容器里，图片常“撑开”布局，不是代码错，而是浏览器默认给替换元素加了 min-width: auto，阻止它收缩：
立即学习“前端免费学习笔记（深入）”；
- 直接给
<img>加min-width: 0，这是最稳定解法 - 别依赖
flex-shrink: 1，对图片这类替换元素效果不可靠 - 如果容器用了
flex，检查是否误设了min-width或flex-basis固定值
进阶适配：max-width 要和 srcset + sizes 配合才完整
CSS 缩放解决的是“怎么显示”，但没解决“加载哪张图”。大屏加载小图会模糊，小屏加载大图又浪费带宽：
-
srcset提供多张不同分辨率的图，例如"small.jpg 480w, medium.jpg 768w" -
sizes告诉浏览器“这张图在当前布局下大概占多宽”，比如"(max-width: 768px) 100vw, 50vw" - 浏览器结合两者，选出最合适尺寸的资源下载，再用
max-width: 100%渲染 - 漏掉
sizes，浏览器只能瞎猜宽度，大概率选错图
