爲什麼父母的div沒有與包含的圖像相同的大小？

我有這樣的情況，我不能把我的頭。爲什麼父母的div沒有與包含的圖像相同的大小？

.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

爲什麼會嚇壞DIV得到PNG的原寬度的大小？我該如何解決這個問題？我需要父div沒有明確設置這些屬性的子級寬度和高度。

https://jsfiddle.net/gvng79s5/

來源

2016-07-22 incompleteness

給圖像顯示'：block'可能？ – vsync

css規則不會上流。使您的img 50％寬度不會神奇地使父母也小50％。 –

當你設置'position：absolute;'你也必須設置'width：100％'，否則div會摺疊以填充最小寬度。 – Toby

嗯，這是因爲% percentage這是真的。默認div width值爲auto，所以現在如果您要在% percentage中定義您的子元素，則在該情況下，您的父母根據子元素的寬度在% percentage中指定子元素的寬度，即子元素的100%。

此處我們將50% width分配到child element和parent沒有任何寬度。但它會自動分配，因爲孩子需要是家長的50％。而在px都是一樣的。

/*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>

來源

2016-07-22 15:27:31 frnt

因爲你申請你的導航風格的形象，而不是股利。

如果你希望你的形象採取div的大小，可以設置height和你的div width根據您的喜好，給width: 100%你的形象：

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

.navigation > img {   
    width: 100%; 
}

叉形你撥弄here。

來源

2016-07-22 14:54:18 Mistalis

爲什麼父母的div沒有與包含的圖像相同的大小？

回答

相關問題