Es versteht es so die W3C-Spezifikationen . Damit max-height funktioniert, muss etwas anderes als der Inhalt explizit das height des enthaltenen Elements festlegen. Wenn Sie also height: 100% einstellen, funktioniert das, weil Sie .article explizit anweisen, sein height von seinem übergeordneten Element (und nicht von seinem Inhalt) zu übernehmen. Wenn Sie .article jedoch mit max-height festgelegt haben, ist es immer noch der Inhalt, der die berechnete height antreibt, nur mit der Einschränkung, dass die Größe nicht über die .container height hinausgeht. Und in Ihrem Fall ist der Inhalt der img selbst.
In dieser Geige kannst du sehen, dass sich die .article tatsächlich auf die height von% beschränkt. co_de%, erlaubt aber, dass der Inhalt von sich selbst (der .container ) auf eine größere Höhe überläuft. Die img wird nicht durch img eingeschränkt, da max-height keine explizite .article Menge hat, sondern tatsächlich ihre Höhe von height erhält (nur begrenzt) dass es nicht über den img seines Containers hinausgehen kann.
Tags und Links css image firefox responsive-design