关键不是height: 100%，而是切断flex-shrink并提供稳定尺寸上下文；因height: 100%需父容器有确定高度，否则计算为0致塌陷，且强制拉伸破坏宽高比。
图片在 Flex 容器里自适应高度，关键不是靠 height: 100%，而是切断 flex-shrink 并给 object-fit 一个稳定的尺寸上下文。
为什么
会让图片变形
直接给
设
会强制拉伸，破坏原始宽高比；若父容器高度未显式定义（比如只靠
），
还可能计算为 0，导致图片塌陷或消失。Flex 不会自动把“剩余空间”转成子项的百分比高度，它只按 flex-basis 和收缩/增长规则分配。
必须依赖父级有确定高度（如
或
），否则无效
即使父容器有高度，
组合仍会强制拉伸，
只能裁剪，不能恢复比例
常见现象：图片被压成一条线，或加载后突然跳变——多因 height 计算不稳定触发重排
是防止压缩的最小安全写法
这是让图片“守着自己固有尺寸、不被 Flex 主轴挤压”的最简可靠方案。它等价于
，其中
表示以图片原始宽高为基准，不受父容器宽度强行拉扯。
别用
单独写，没配
时浏览器行为不一致（尤其 Safari）
避免
：100% 按父容器宽度算，若父容器高度未约束，图片纵向仍可能塌陷
响应式场景下，可配合
+
，再加
防止嵌套 Flex 压缩
要自适应高度，得靠
或
锚定容器
图片自身不生成高度，它的高度必须由父容器提供。如果目标是“图片随容器宽度变化、自动保持 4:3”，就不能只靠
，而要让容器先有可推导的高度。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
现代方案（Chrome 88+ / Safari 15.4+）：
兼容方案：父容器设
（4:3 对应 75%）+
，
绝对定位并设
全屏主图场景：图片父容器设
（防嵌套 Flex 僵死），
设
是嵌套 Flex 中图片突然消失的解药
多层 Flex 嵌套（如卡片 → 网格 → 图片区）时，图片常被压成像素级细线或加载后错位。这不是
失效，而是 flex 默认
拒绝把替换元素缩太小，导致布局卡死。
在图片本身或其**直接父容器**上加
，明确告诉 Flex：“这东西可以缩到 0”
典型组合：
若用了
却发现裁剪区域偏移，大概率是
漏了，或父容器没设
真正难的不是写对一行
，而是判断当前图片处在哪一层 Flex 上下文中、它的高度来源是否可靠、以及是否被某层默认的
或
暗中锁死。
height: 100%imgheight: 100%flex: 1height: 100%height: 100%min-height: 300pxflex-basis: 300pxwidth: 100%; height: 100%object-fitflex: 0 0 autoflex-grow: 0; flex-shrink: 0; flex-basis: autoflex-basis: autoflex-shrink: 0flex-basisflex: 0 0 100%max-width: 100%height: autoflex: 0 0 automin-heightaspect-ratioobject-fitaspect-ratio: 4 / 3; width: 100%; object-fit: cover;padding-top: 75%position: relativeimgwidth: 100%; height: 100%; object-fit: cover;flex: 1; min-height: 0imgmax-width: 100%; max-height: 100%; object-fit: contain;min-width: 0object-fitmin-width: automin-width: 0img { max-width: 100%; height: auto; min-width: 0; flex: 0 0 auto; }object-fit: covermin-width: 0overflow: hiddenobject-fitmin-widthflex-shrink