2016-02-02

HTML and CSS to Make Image Fill Window Height

I wanted to get an image to fill the entire window height in the browser and center horizontally, keeping the aspect ratio. There are a number of different ways of trying to do this, however, for my purposes (use in an epub, which restricts the HTML and CSS)  I could not use position:fixed or JavaScript. This vastly cut down on the number of methods possible. This is what I wound up with:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Cover</title>
    </head>
    <body>
        <div style="text-align:center">
            <img style="height:98vh" src="../Images/cover.jpg" />
        </div>
    </body>
</html>

The 98vh is a CSS3 unit that scales the height to 98% of the viewport height. This leaves a little border around the image. The vh will work in most modern browsers, but not in older ones.

No comments :

Post a Comment