必须给flex容器中的图片加max-width:100%、height:auto和min-width:0，否则因min-width:auto默认行为会撑开布局；还需确保父容器有明确宽度参照或改用max-width:100vw，并配合object-fit时设置宽高及overflow:hidden。
图片在Flex容器里撑开父容器怎么办
Flex容器默认不压制子元素尺寸，img没设约束时会按原始宽高强行撑开布局。这不是bug，是规范行为——min-width和min-height默认为auto，浏览器拒绝压缩。
- 给
img加max-width: 100%+height: auto，这是基础防线 - 必须补上
min-width: 0（Safari 和部分 Chrome 版本里，没它max-width可能失效） - 显式写
flex-shrink: 1，别依赖父级flex值自动继承 - 检查父容器是否设了
width或flex-basis——否则100%无参照 - 若父容器是
display: flex且align-items: stretch（默认），给img加align-self: flex-start防垂直拉伸
为什么加了max-width: 100%还是溢出
常见错因不是规则没写，而是它没生效：百分比基准错了，或被其他样式覆盖。
-
max-width: 100%参考的是**最近的、有明确宽度的祖先元素**，不是视口。如果外层是position: absolute或display: flex且没设宽，基准就飘了 - 更稳妥的做法是直接用
max-width: 100vw，跳过父级依赖 - 检查是否有
white-space: nowrap、min-width或flex-shrink: 0干扰收缩 - Bootstrap项目中漏掉
img-fluid类是最常见疏忽；自定义组件需手动补 - 避免同时写
width: 100%和max-width: 100%——Safari旧版会触发尺寸重算异常
要保持比例又填满容器，object-fit怎么用才不翻车
object-fit: cover或contain不是“开了就灵”，它只在已有盒模型内生效，且对容器尺寸有硬性要求。
- 必须配合
width: 100%+height: 100%（或固定值），单独写object-fit无效 - 移动端真机测试时，iOS Safari 9.3需
-webkit-object-fit: cover，Autoprefixer得配safari >= 9 - 安卓某些低端WebView根本不支持
object-fit，降级方案只能用背景图：background-size: cover+background-position: center - 横屏下容器宽高比突变，
object-fit: contain可能让图缩成图标大小，需搭配媒体查询兜底 - 别忘了
overflow: hidden——否则cover裁剪的部分会溢出
旧版Safari（iOS ≤ 15.4）怎么保比例
aspect-ratio在iOS 15.4+才支持，老系统得用padding-top百分比技巧回退，但限制多。
- 容器必须是块级、非
flex/grid子项，且子img要position: absolute - 比如16:9容器：
padding-top: 56.25%（9 ÷ 16 × 100%），再用top: 0; left: 0; width: 100%; height: 100%定位图片 - 这个技巧不兼容
img作为Flex/Grid子项，此时只能切背景图或JS动态设高 - 别对
img同时设width和height具体值，否则覆盖max-width: 100% - 真机测试别只看竖屏——横屏下
padding-top仍按原宽计算，比例会偏移
min-width: 0和100vw这两个点：前者让max-width在Safari里真正起效，后者绕过父级宽度链路。没它们，其他所有设置都可能白忙一场。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
