Resize to fit available screen space in smallest dimension with pure CSS

Asked Apr 09 '15 at 00:53

Active Apr 09 '15 at 01:02

Viewed 32 times

I want to display images in a way that maximizes the amount of screen space used while still showing the whole picture. The images are either in portrait or landscape orientation and should be fully visible on displays in both orientations.

Currently I am using these CSS rules for my images:

max-width: 100%;
height: auto;

This does the job just fine when viewing landscape images on portrait displays, but breaks on landscape displays:

correct

bad

Is there a way (preferably using only CSS on modern browsers) to make the image fit in all cases?

edited Apr 09 '15 at 01:02

asked Apr 09 '15 at 00:53

jbaiter

6,913
4
30
40

Do you mean [`background-size: cover`](http://jsfiddle.net/rdLeqpfx/)? – Jared Farrish Apr 09 '15 at 00:59
I'd prefer not to use any `background-image` workarounds, if that's possible :-/ – jbaiter Apr 09 '15 at 01:00
1

You need both CSS and jQuery to get the job done. See previous answer and also http://stackoverflow.com/questions/16739908/make-image-fill-div-completely-without-stretching – Marc Audet Apr 09 '15 at 01:01
Thank you, that does seem like a reasonable way. – jbaiter Apr 09 '15 at 01:05

Resize to fit available screen space in smallest dimension with pure CSS

0 Answers0