flex容器中图片需设max-width:100%、height:auto、flex:1 1 0、min-width:0才能自适应；响应式须配srcset/sizes；grid布局更稳但需兼容处理；viewport标签缺失会使所有响应逻辑失效。
没加 max-width: 100% 和 height: auto，图片在 Flex 容器里一定会变形或溢出——这不是浏览器 bug，是 CSS 渲染逻辑决定的。
Flex 容器里图片不自适应的典型表现
常见错误现象包括：图片被拉宽压扁、右侧突然消失、最后一行留大片空白、缩放窗口时错位跳动。根本原因不是 Flex 本身有问题，而是图片仍按原始尺寸参与 flex 分配，而 flex 属性只控制“分配空间”，不接管“内部缩放”。
- Flex 项默认
min-width: auto，会阻止图片收缩到小于其固有宽度 - 没设
height: auto时，max-width: 100%单独生效会导致宽高比断裂 - 用
width: 100%强制拉伸，小图直接糊成马赛克
flex: 1 1 0 是让图片真正“弹性”的关键参数
很多人写 flex: 1 就以为万事大吉，但默认的 flex-basis 是 auto，图片依然卡在原始尺寸。必须显式设为 0，才能让 flex 按容器剩余空间重新计算尺寸。
-
flex: 1 1 0=flex-grow: 1+flex-shrink: 1+flex-basis: 0 - 搭配
min-width: 0（防止 Chrome/Firefox 对图片的 min-width 保护） - 必须同时保留
max-width: 100%，否则 flex 拉伸可能超出父容器
img {
max-width: 100%;
height: auto;
flex: 1 1 0;
min-width: 0;
}
响应式图片在 Flex 布局中必须配合 srcset 和 sizes
仅靠 CSS 缩放解决不了带宽浪费和 DPR（设备像素比）问题。Flex 容器宽度是动态的，sizes 必须反映真实渲染宽度，否则浏览器选错资源。
- 别写死
sizes="100vw"，如果图片在flex: 1的两栏布局中，实际占宽约50vw - 推荐写法：
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" -
srcset中每个资源后必须标注480w或2x，不能混用 - 异步加载图片时，
flex-basis: 0可避免重排抖动
Grid 替代 Flex 做图册时更稳，但要注意兼容性
当图片尺寸差异大、列数需自动调节时，Flex 的 flex-wrap 容易出现最后一行不均、空隙难控的问题。Grid 的 auto-fit + minmax() 更可靠。
- 核心写法：
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) - 必须用
gap控制间距，禁用margin—— 否则网格轨道计算失效 - IE11 不支持该语法，需降级为 Flex 或引入
postcss-grid-kiss等插件 - 图片仍需保持
max-width: 100%+height: auto，Grid 不改变图像自身渲染规则
最常被忽略的点是：viewport 标签缺失导致所有媒体查询失效，进而让 Flex 断点、sizes 计算全部失准。它不在 CSS 里，却决定着整个响应链是否成立。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
