CSS - have 16:9 image fill body, but preserve ratio on 4:3

Question

I am looking to have an image fill 100% width and height of the page.

I found some CSS, can't remember where now, which performs this task - however my images are 16:9 and when viewed on a 4:3 monitor the images become squashed to fit the narrower width.

So on 16:9 the image will fit neatly and at other resolutions (or browser sizes) the image will be centralised and cropped, so it is missing the edges.

As you can see from the Fiddle, the white square in the test image is not square.

Fiddle: http://jsfiddle.net/7h6yt/

And the CSS/HTML.

<img src=http://i47.tinypic.com/izyqyv.jpg>

        body{
            margin: 0;
        }

        img{
            min-height: 100%;
            min-width: 1024px;
            width: 100%;
            height: auto;
            position: fixed;
            top: 0;
            left: 0;
        }

        @media screen and (max-width: 1024px){
            img{
                left: 50%;
                margin-left: -512px;
            }
        }

I agree with your observations, but what's your desired result? — Jeff-Meadows, Mar 13 '13 at 21:16
As stated above, the desired result is to have it show in the correct aspect ratio. — user887515, Mar 16 '13 at 12:48

score 1 · Accepted Answer · answered Mar 13 '13 at 21:32

1

Try using the

background-size: cover;

attribute, like this?

http://jsfiddle.net/7h6yt/1/

answered Mar 13 '13 at 21:32

aroundtheworld

731
1
5
15

This is perfect! However it is CSS3, need it supported in IE8 :( – user887515 Mar 16 '13 at 12:49
1

Found an IE filter, will use in conjunction with this, thank you! http://stackoverflow.com/questions/2991623/make-background-size-work-in-ie – user887515 Mar 16 '13 at 12:52

CSS - have 16:9 image fill body, but preserve ratio on 4:3

1 Answers1