Prozentsatz max-height auf das Bild in firefox ignoriert

Question

HTML:

<div class="container"> 
    <article class="article"> 
     <img class="article-img" src="bordeaux.jpg" /> 
    </article> 
</div> 

CSS:

.container{ 
    width:500px; 
    height:200px; 
} 
.article{ 
    max-height:100%; 
} 
.article-img{ 
    max-height:100%; 
} 

sehen seine jsfiddle in Firefox

http://jsfiddle.net/UETMr/4/

Ich brauchte .Artikel auf Höhe einzustellen: 100% für Bild in Firefox

kann jemand erklären, wie funktioniert firefox verstehen Prozentsatz max-height und ihre Behälter zu schrumpfen?

danke im voraus!

Answer 1

Es versteht es so the W3C specifications state. Für max-height zu arbeiten, muss etwas anderes als der Inhalt selbst explizit die height des enthaltenen Elements festlegen. Wenn Sie height: 100% setzen, funktioniert das deshalb, weil Sie jetzt explizit .article anweisen, seine height von seinem übergeordneten (und nicht seinem Inhalt) zu übernehmen. Aber wenn Sie .article mit max-height gesetzt haben, dann ist es immer noch der Inhalt, der seine berechnete height, nur mit der Einschränkung der nicht Größe nach der .containerheight. Und in Ihrem Fall ist der Inhalt der img selbst.

In this fiddle, können Sie sehen, dass die .article in der Tat ist sich der height von .container beschränke, aber der Inhalt selbst ist erlaubt (die img) auf eine größere Höhe zu überfluten. Die img wird nicht durch seine max-height eingeschränkt, weil .article keine expliziteheight gesetzt haben, ist aber in der Tat seine Höhe von der img bekommen (nur ist es begrenzt, dass es nicht über die height des Containers gehen kann).