Bilder mit der gleichen prozentualen Höhe und Breite sind Rendering mit unterschiedlichen Höhen

Question

Ich habe an mehreren Stellen gelesen, dass, wenn Sie Bilder in Prozent messen, der Prozentsatz auf seinem übergeordneten Container basiert. Angesichts des folgenden Codes kann ich nicht verstehen, warum zwei unterschiedliche Bilder bei gleicher Höhe und Breite zu zwei leicht unterschiedlichen Ausgaben führen würden.

div { 
 
    border: solid black; 
 
} 
 
img { 
 
    width: 40%; 
 
    height: 40%; 
 
    margin-right: 5%; 
 
} 
 
body { 
 
    background-color: white; 
 
}

<div> 
 
    <img src="../images/458.jpg"> 
 
    <img src="../images/650S.jpg"> 
 
</div>

Answer 1

Die Bilder werden nur auf der width: 40% Größe basiert.

Ihr height: 40% wird ignoriert, da das übergeordnete Element keine Höhe angegeben hat.

In einem Blockformatierungskontext muss eine Höhe auf dem Eltern für eine prozentuale Höhe deklariert werden, um auf dem Kind zu arbeiten, außer das Kind ist absolut positioniert.

Siehe hier für weitere Details: Working with the CSS height property and percentage values

Try this:

html, 
 
body { 
 
    height: 100%; 
 
    background-color: white; 
 
} 
 
div { 
 
    height: 100%; 
 
    border: solid black; 
 
} 
 
img { 
 
    width: 40%; 
 
    height: 40%; 
 
    margin-right: 5%; 
 
}

<div> 
 
    <img src="../images/458.jpg"> 
 
    <img src="../images/650S.jpg"> 
 
</div>

Answer 2

Sie sind wegen Ihrer Eltern div Sie verschiedene Ausgabe gibt. Sie haben ihm keine Größen zugewiesen: width von height. Daher verwenden Browser Originalgrößen, um neue Größen zu berechnen.

Wenn Sie etwas zu Ihrem Stil hinzufügen wird:

div { 
    width: 50%; 
    height: 300px; 
} 

Die Ausgabe sollte gleich sein.