给图片加 max-width: 100%、height: auto、min-width: 0 和 flex-shrink: 1，确保父容器有明确宽度，并根据需要设置 align-self: flex-start 或 object-fit: contain。
图片在Flex容器里撑开父容器怎么办
Flex容器默认不会限制子元素尺寸，img 一旦没设宽高或加载后自然尺寸过大，就会强行撑开容器、破坏布局。这不是Flex“坏了”，而是它按规范在做事——flex-shrink: 1 默认生效，但图片的 min-width 和 min-height 默认是 auto，导致它拒绝压缩。
- 给图片加
max-width: 100%+height: auto，强制它随容器缩放 - 确保父 Flex 容器有明确宽度（比如
width: 300px或flex-basis），否则100%无参照 - 如果图片是响应式且嵌套多层，检查中间容器是否意外设置了
white-space: nowrap或overflow: visible
Flex子项图片被截断或留白异常
常见于设置了 flex: 1 或 flex: 1 1 auto 的容器中，图片高度不固定时，align-items: stretch（默认值）会拉伸图片，而图片又不支持垂直拉伸，结果要么变形、要么顶部/底部留白。
- 给图片父容器（即 Flex 子项）加
align-self: flex-start，避免被拉伸 - 或者直接给
img设align-self: flex-start，更精准 - 若需居中显示且不拉伸，用
object-fit: contain替代width/height百分比，再配合object-position微调
使用 object-fit 后图片模糊或比例错乱
object-fit 不是万能胶，它只控制“如何填满”，不改变原始像素。如果图片本身分辨率低、或容器尺寸远超原图，浏览器插值放大就会糊；若设成 cover 又没配好 object-position，关键内容可能被裁掉。
-
object-fit: cover必须搭配width: 100%和height: 100%才生效，单独写没用 - 移动端要注意：某些老版 Android WebView 对
object-fit支持差，可加img { display: block }防止底部多余间隙 - 想兼顾清晰度和比例，优先用 srcset 提供多倍图，而不是依赖 CSS 缩放
Flex + 图片在 Safari 中仍溢出
Safari（尤其 iOS 15–16）对 img 在 flex: 1 容器里的收缩行为处理更保守，默认会保留图片最小固有尺寸，即使写了 max-width: 100% 也可能无效。
- 必须给
img显式加flex-shrink: 1，不能只靠父级flex值 - 加
min-width: 0和min-height: 0到图片上，破除浏览器对替换元素的默认最小尺寸保护 - 如果图片是背景图，改用
background-image+background-size: contain/cover，绕过 Safari 的 img 渲染逻辑
最常被忽略的是 min-width: 0 —— 它不是锦上添花，而是 Safari 和部分 Chrome 版本里让 max-width: 100% 真正起效的前提。没有它，其他所有设置都可能白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
