Max size for background image CSS

Question

I have a 70 by 50 px box and I have various images, (SVG files, so no size) I want to keep their aspect ratio, but some images are portrait and some are landscape sized. So I can do:

background-size: 70px auto;

and that will work for all the landscape icons. But it will stretch the portrait images and make them taller, so they will still have the correct aspect ratio but the top and bottom will be cut off.

is there some kind of background-max-size?

(alternatively, the only reason I'm using background image is because you can center align the image, horizontally and vertically, so the alternative is to find how to vertically align an img element within a li element.)

Answer 1

It's not that hard doing that with CSS

• 1st, please take a look at the Mozilla Specs for mixed units for background-size.
• 2nd, please consider simply setting background-size: contain; (IE9+, Safari 4.1+, FF 3.0+, Opera 10+) and min/max-width/height for the container element.

Answer 2

You can absolutely solve this problem without JavaScript using a combination of CSS3 background-size and media-queries. e.g.:

@media only screen and (max-width: 1000px) {
    #element {
        background-size: contain;
    }
}

Note that neither are supported in IE8 or below, so you should include fallbacks for old IE if you still support it.