Remove this tag from your code:
<br />
It pushes your <a>
with the content down and it overflows it's parent container.
题
I'm trying to make an image inside a div that is always 100% of the height, with the width proportional. But when I set the height to 100% it comes out larger than the div
. Am I misunderstanding what height 100% means?
Here's the 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;
}
And here is the html:
<div id="whoami_bg">
<br /> <a href="whoami.html">
<img src = "images/whoami_image.gif" />
</a>
</div>
It does scale, but it scales too big. This happens in chrome and safari at least. I have tried giving the image a class = "whoami"
and putting the style in an img.whoami
tag, but it works the same. For some reason my images have decided to give 110%. :P
It seems simple; how do I make my image 100% the height of my div
?
解决方案 2
Remove this tag from your code:
<br />
It pushes your <a>
with the content down and it overflows it's parent container.
其他提示
Your <br />
tag is disrupting the flow of these elements. In general, you should avoid using these except for text-only elements. Removing this tag fixes the height issue:
<div id = "whoami_bg">
<a href = "whoami.html">
<img src = "images/whoami_image.gif" />
</a>
</div>