Greg Reddick: 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.

Greg Reddick

2016-02-02

HTML and CSS to Make Image Fill Window Height

No comments :

Post a Comment