Max size for background image CSS

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 wit开发者_Python百科hin a li element.)

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.

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.

i'm a little (10 years) late to this question so previous answers weren't good enough for me

we have a css function called clamp which can define size with min & max values: clamp(<min-size>, <expected-size>, <max-size>)

width: clamp(100px, 10vw, 500px);

and yes my friend you can use that for background-size too.

background-size: clamp(1000px, 80%, 1500px) auto;

*IE support is questionable as always.

This is a problem that CSS can't solve on its own. There are JavaScript libraries that will do this job. If you use jQuery, you can find a plugin or roll your own function.

Grab the width and height of the image, and calculate the ratio (x/y). If the ratio is greater than 70/50 (1.4), set the width to 70px and the height to (70 * x/y). If the ratio is less than 70/50 (1.4), set the height to 50px and the width to (50 * x/y).

Also see CSS vertical-align

If you use browsers that don't support vertical-align, you can position the image absolutely at 50%, and set the top margin to (width * -0.5) using JavaScript. That will align the middle of the image with the middle of the parent element, which is the same as vertical center alignment.

The answer to this question is a little out of date. As stringman5 mentions, neither of the CSS options are supported in IE8 or below. It is also not the best choice to have jQuery handle your background images if it isn't necessary. In order to use an option that includes the fallbacks for older browser, without using JavaScript, you can do something along these lines:

#myElement {
    background: #FFFFFF url('mybackground.jpg') no-repeat right top;
}

@media only screen and (max-width: 1024px){
    #myElement {
        background-size: 50%;
    }
}

Notice that I'm using max-width in my media query, this means that background-size: 50%; will be applied UNTIL 1024px. Beyond that point, it does it's default size. In older browsers that don't support media queries or background-size, they will ignore the options and render the maximum size of the background image (default size).