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>

它确实有规模，但它的尺度太大了。至少在铬和野生动物园中会发生这种情况。我尝试将图片设为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

Answer 2

从代码中删除此标记：

<br />

它将您的<a>内容向下推，并且它会溢出它的父容器。

图像高度100％比div大

2 个答案: