圖像不會填滿div

這很瘋狂 - 我只能假設我是個白癡。我無法讓我的圖像填充它所在的div。圖像下方一直有5px「填充」。

下面是HTML：

<!doctype html> 

<head><link rel="stylesheet" href="style.css" type="text/css" /></head> 

<body> 
<div class="row"> 
<img src="pic2.jpg" /> 
</div> 
</body>

這裏是CSS：

body, .row, img { 
padding: 0; 
margin: 0; 
border: none; 
} 

.row { 
width: 80%; 
background-color: orange; 
} 

img{ 
width: 50%; 
}

這是結果：

http://imgur.com/yELMe

正如你所看到的，（愚蠢的）藍色和紅色的圖像不填充橙色的div。圖像下方顯示一個5px的一致橙色。這不受div或圖像％寬度的更改或調整窗口大小的影響。

我可以用「margin：-5px;」來解決這個問題，但我想知道它爲什麼會發生（特別是在不同情況下金額大於或小於5px）。

感謝您的幫助（如果這是我的一個荒謬的錯誤，再次抱歉）。

來源

2012-04-22 jkdune

這是一個活生生的例子http://jsfiddle.net/aDtUm/ – jacktheripper 2012-04-22 09:42:10

一個vertical-align值（不是默認baseline等）添加到您的圖片，如：top，middle ...

vertical-align: top;

來源

2012-04-22 09:46:59

這是驚人的 - 爲什麼這樣做？ – jkdune 2012-04-22 09:49:40

對於內嵌圖像（非浮動），頁面的自然浮動具有「突破口」，它們開始尊重爲字體大小，行高和其他字體提供的元素空間。您可以輕鬆測試（在非工作演示中）：只需添加body {font-size：50px;}，您將看到邊距空間將如何增加。通過設置圖像的垂直對齊方式，我們確保提供與瀏覽器默認值不同的位置。 – 2012-04-22 10:00:03

對，我明白了。我從來不會這樣做。再次感謝你的幫助！ – jkdune 2012-04-22 10:12:42

圖像不會填滿div

回答

相關問題