Warum hat ein Elternteil nicht die gleiche Größe wie ein enthaltenes Bild?

Question

Ich habe hier eine Situation, in die ich mich nicht hineinversetzen kann.

.navigation { 
 
    position: absolute; 
 
} 
 

 
.navigation > img { 
 
    height: auto; 
 
    max-width: 50%; 
 
}

<div class="navigation previous"> 
 
    <img src="http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/MinorCatImages/033256AM.png"> 
 
</div> \t \t

Warum freaking die die Größe der png ursprünglichen Breite div zu bekommen? Wie kann ich das lösen? Ich brauche das übergeordnete div-Element, um die Breite und Höhe der untergeordneten Elemente zu erhalten, ohne diese Eigenschaften explizit festlegen zu müssen.

https://jsfiddle.net/gvng79s5/

Answer 1

Nun, es ist wegen % percentage das stimmt. Standard div width Wert ist auto, so dass jetzt, wenn Sie Ihr untergeordneten Element in % percentage definieren, dann in dieser Situation Ihre Eltern berechnet seine Breite entsprechend der Breite des untergeordneten Elements bei der Zuweisung in % percentage, d. H. 100% von Kind zu Elternteil.

Über-hier vergeben wir 50% width zu child element und parent hat keine Breite. Aber es weist es automatisch zu, da das Kind 50% des Elternteils sein muss. während in px beide gleich sind.

/*Using Percentage*/ 
 
.navigation { 
 
\t \t \t \t position: absolute; 
 
     background:#111; 
 
    \t \t \t } 
 

 
\t \t \t .navigation > img { 
 
\t \t \t \t height: auto; 
 
\t \t \t \t max-width: 50%; 
 
\t \t \t } 
 
/*using pixels*/ 
 
\t .previous { 
 
\t \t \t \t position: absolute; 
 
       background:#111; 
 
    \t \t \t } 
 

 
\t \t \t .previous > img { 
 
\t \t \t \t height: auto; 
 
\t \t \t \t width: 100px; 
 
\t \t \t }

<div class="navigation"><img src="http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/MinorCatImages/033256AM.png"> 
 
</div> 
 

 
<br><br><br><br><br> 
 

 
<div class="previous"> 
 
<img src="http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/MinorCatImages/033256AM.png"> 
 
</div>

Answer 2

Weil Sie Ihren Navigations Stil auf das Bild anwenden, nicht die div.

Wenn Sie Ihr Bild wollen die Größe des div zu nehmen, können Sie height und width Ihres div eingestellt, wie Sie es vorziehen, und geben width: 100% zu Ihrem Bild:

.navigation { 
    width: 20%; //change it 
    height: 20%; //change it 
} 

.navigation > img {   
    width: 100%; 
} 

Gespaltene Ihre Fiddle here.