Html 图像高度100%大于div

我试着在一个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

？

从代码中删除此标记：

<br />

---

它向下推送您的

，使内容溢出父容器。

您的

标记正在中断这些元素的流动。通常，除了纯文本元素外，应该避免使用这些元素。删除此标记可修复高度问题：

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

---

您是否尝试过使用“最大高度”而不是“高度”。（最大高度：100%）@user3557096:很高兴帮助你！请标记为已回答。对不起，我对SO完全陌生，这里的用户界面无法穿透。如何将问题标记为已回答？user3557096:在答案的分数下，我的答案有一个复选标记的轮廓，您应该单击它以接受答案（单击它后，复选标记将变为绿色）