CODEWITHSUNDEEP
htmlcssimage
JSW189
JSW189

Reputation: 6325

Issue with the scrollbar/overflow when an image height is set to 100%

I am trying to get an image to be 100% of the height of the browser window. I succeeded using the code below; however, the scroll bar lets the page scroll about 2px down below the image. Is this a margin issue? I do not want the scrollbar to appear at all, but I also want the image touching the bottom of the page.

HTML:

<div class="container">
    <div class="artwork">
        <img src="images/picture1.jpg">
    </div>
</div>

CSS:

* { margin: 0; }

body, html, .container {
    height: 100%;
}

.artwork img {
    height: 100%;
}

Upvotes: 0

Views: 372

Answers (1)

James Montagne
James Montagne

Reputation: 78650

The issue is in the fact that by default images are vertically aligned with the baseline. You can see this if you put an image next to some text. The image aligns to the baseline of the text, while letters like g and y go below the baseline. The space you are getting is the space below the baseline which is for the letters to go below. If you change the vertical-align to top the space will disappear.

http://jsfiddle.net/YJZRE/

.artwork img {
    height: 100%;
    vertical-align: top;
}

Upvotes: 1

Related Questions