图片高度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

回答

相关问题