图的最大高度不考虑父母的尺寸

Question

我img在液体中有一个元素div。该img max-height设置为100％。因此，如果图像比div高，则应将其渲染为与div一样高。

.png文件的原始大小为200x200。在我的浏览器中，div显示为284x123。因此，应将img渲染为123x123，以保持其宽高比。

但是，img打破了div的界限，仍然显示为200x200。我似乎无法弄清楚为什么会这样。

这是在Chrome上发生的，但不是在Firefox上发生的（我上次尝试）。

左侧 ，您会看到一个灰色箭头，即我正在谈论的.png。右侧的箭头是SVG文件，可以正常工作。

编辑：
我创建了一个单独的，其中img的max-height似乎可以正常工作。.我找不到导致该问题的项目不上班。

Answer 1

我想到了。为了使元素的最大高度起作用，其父元素之一必须height定义一个属性（显然以固定单位（例如px），而不是百分比）。

从w3c规格：

相对于生成的盒子的包含块的高度计算百分比。如果未明确指定包含块的高度（即，它取决于内容的高度），并且该元素的位置不是绝对的，则将百分比值视为“
0”（对于“ min-height”）或“ none” （对于“最大高度”）。

由于我的img父级都没有定义固定的高度，因此我不得不将img限制为最大宽度。

编辑

我使用了该线程中提供的解决方法，并使用了position: absolute; max-height: 100%; top: 0。