圖片高度100％出來大於div

我試圖在div中創建一個始終爲100％高度的圖像，寬度與此成正比。但是，當我將高度設置爲100％時，它會比div大。我誤解了100％的高度意味着什麼？圖片高度100％出來大於div

這裏的CSS：

#whoami_bg { 
    position: absolute; 
    left: 3%; 
    top: 26%; 
    width: 45%; 
    height: 35%; 
    background: rgba(50, 204, 239, 0.4); 
} 
#whoami_bg img { 
    height: 100%; 
    width: auto; 
    display: block; 
    margin: 0 auto; 
}

這裏是HTML：

<div id="whoami_bg"> 
    <br /> <a href="whoami.html"> 
     <img src = "images/whoami_image.gif" /> 
    </a> 
</div>

它做規模，但它擴展太大。至少在鉻和Safari瀏覽器中會發生這種情況。我試圖給圖像class = "whoami"，並把樣式放在img.whoami標籤中，但它的工作原理是一樣的。出於某種原因，我的圖片決定給110％。：P

看起來很簡單;我如何讓我的形象100％高度我的div？

來源

2014-04-21 jimboweb

您是否嘗試過使用最大高度，而不是高度。（最大高度：100％;） –

從您的代碼本文標籤：

<br />

它推動你的<a>與內容向下溢出它的父容器。

來源

2014-04-21 15:40:55 potashin

哦，哦。謝謝！ – jimboweb

@ user3557096：很高興爲您效勞！請標記爲已回答。 – potashin

對不起，我是全新的，所以用戶界面在這裏是難以逾越的。我如何將問題標記爲已回答？ – jimboweb

您的<br />標記正在破壞這些元素的流動。一般來說，您應該避免使用這些除了純文本元素。刪除此標記修復了身高問題：

<div id = "whoami_bg"> 
    <a href = "whoami.html"> 
     <img src = "images/whoami_image.gif" /> 
    </a> 
</div>

JSFiddle

來源

2014-04-21 15:41:09 Bucket

圖片高度100％出來大於div

回答

相關問題