html - 图像高度 100% 比 div 大

Question

我正在尝试在 div 中制作一个始终为 100% 高度且宽度成比例的图像。但是当我将高度设置为 100% 时，它会比 div 大。我是不是误解了 100% 的高度是什么意思？

这是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>

它确实可以扩展，但扩展太大了。这至少发生在 chrome 和 safari 中。我试过给图像一个 class = "whoami" 并将样式放在 img.whoami 标签中，但它的工作原理是一样的。出于某种原因，我的图片决定提供 110%。 :P

看似简单；如何使我的图像 100% 成为我的 div 的高度？

Answer 1

你的 <br />标签正在扰乱这些元素的流动。一般来说，除了纯文本元素，你应该避免使用这些。删除此标签可修复高度问题:

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

JSFiddle