<img>无法根据同级flex容器高度自动适配的问题排查

Flex布局中高度适配失效的核心逻辑 #

核心冲突：替换元素的固有宽高比 vs Flex的拉伸规则 #

<img>是替换元素，自带原始宽高比属性。当你在水平flex容器中给它设置固定宽度326px，同时用align-self:stretch要求它拉伸高度匹配右侧内容时，浏览器的布局逻辑会出现优先级冲突：

• Flex规则要求<img>高度占满容器交叉轴（即右侧内容的高度）
• 替换元素规则要求<img>优先维持自身宽高比，自动计算高度

这种冲突下，浏览器会优先遵循替换元素的宽高比规则，只有当容器高度与按宽高比计算出的高度完全匹配时，<img>才会刚好填满容器高度；一旦两者不匹配，<img>就会维持宽高比对应的高度，拒绝拉伸。

为什么只有中等高度内容会出问题？ #

这是因为不同高度的内容触发了浏览器不同的布局权衡：

• 内容高度远小于宽高比计算高度：浏览器会强制将<img>高度压缩到容器高度（此时宽高比被打破，但因高度差过大，优先满足容器约束）
• 内容高度远大于宽高比计算高度：<img>会先按宽高比放大到最大可能尺寸，之后要么溢出容器，要么在某些浏览器逻辑下被强制拉伸（取决于具体布局）
• 中等高度内容：高度差处于临界点，浏览器判定优先维持宽高比更合理，因此<img>高度无法适配容器，出现失效。

缩小图片宽度后恢复正常的原因 #

缩小宽度后，按<img>固有宽高比计算出的高度会同步降低，刚好接近或等于中等高度内容的容器高度，此时宽高比规则与Flex拉伸规则达成一致，<img>自然能适配容器高度。

背景图div能正常工作的本质 #

<div>是非替换元素，没有自带的固有宽高比约束。align-self:stretch可以直接让它的高度占满容器，背景图则通过background-size属性独立控制显示方式，完全不受元素本身的尺寸规则限制，因此不会出现适配冲突。

内容的提问来源于stack exchange，提问作者Stefan Sabadas