圖像更大，父母的div

Question

我有一個非常簡單的HTML格式裏面的圖像。奇怪的是，圖像超出了div的底部，我不明白爲什麼。

<div> 
    <img src="picture.jpg"> 
</div> 

當我檢查元素屬性時，div的高度爲195px，圖像的高度爲200px。

這讓我卡住了。有什麼可能導致這種情況，我該如何解決？

EDIT1

通過屬性看，我發現：

img { 
    margin-bottom: -5px 
} 

這是由w3.css設置：

.w3-image{max-width:100%;height:auto}img{margin-bottom:-5px}a{color:inherit} 

我不知道爲什麼，這被施加爲我沒有爲這個圖像或包含div設置類。

現在我已經有固定的：

img { 
    margin-bottom: 0px !important; 
} 

EDIT2

好了，找到了。 Clas正在其他地方應用。現在刪除它，一切都很好。

Answer 1

你coud給出一個ID的圖像，並把它添加到CSS文件白衣一個widthof 100％

<div src="img.jpg" id="id_example"></div> 

*** /// CSS

#id_example { 
    width: 100%; 
     } 

，或者你可以嘗試像素

Answer 2

這很容易。

對於這個HTML代碼：

<div> 
    <img src="picture.jpg"> 
</div> 

添加這個CSS代碼：

div img { 
    display: block; 
    width: auto; 
    height: 100%; 
}