Possible to set a max-width for a background image? (want to scale background-image down, but not scale up)

Question

I am using a series of a div elements to display a set of client logos. The reason for using background images was to allow the images to be vertically and horizontally cent

Answer 1

I think that this is what your a re asking for

demo

The HTML is

<div class="clientlist">
<div class="client"><div class="client1"></div></div>
<div class="client"><div class="client2"></div></div>
<div class="client"><div class="client3"></div></div>
<div class="client"><div class="client4"></div></div>
<div class="client"><div class="client5"></div></div>
  <div class="push"></div>
</div>

And The CSS is

body, html {
    height: 100%;
}

.clientlist {
    text-align: justify;
    display: inline-block;
    width: 100%;
}

.clientlist .client { 
    width: 18%; 
    height: 90px; 
    max-width: 200px;
    display: inline-block;
}

.clientlist .client div { 
    width: 100%; 
    height: 100%; 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: contain;
} 

.push {
    display: inline-block;
    width: 100%;
    height: 0px;
}
    
.client1 { background-image: url(http://placekitten.com/200/300); }
.client2 { background-image: url(http://placekitten.com/200/200); } 
.client3 { background-image: url(http://placekitten.com/200/180); } 
.client4 { background-image: url(http://placekitten.com/220/200); } 
.client5 { background-image: url(http://placekitten.com/180/200); } 

I am setting the max-width on the div, and not really in the background size; but I think that the result is the intended one. To make the div space evenly, I use a trick using text-align: justify. For this to work; I need an extra element in the HTML that is the "push" class.

Answer 2

It doesn't look like this is possible yet.

Based on the syntax examples on https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Syntax, you would think you could do something along the lines of "background-size: auto, auto, contain;" but it didn't play out that way in my initial testing on Chrome, FF and IE. They all seem to do fine with SVGs. Chrome and IE fail with PNGs. All of them fail with GIFs.

To me, it seems like this behavior we are looking for is spelled out pretty clearly on http://www.w3.org/TR/css3-background/#the-background-size:

If both values are ‘auto’ then the intrinsic width and/or height of the image should be used, if any, the missing dimension (if any) behaving as ‘auto’ as described above. If the image has neither an intrinsic width nor an intrinsic height, its size is determined as for ‘contain’.

However, it doesn't play out that way so maybe I'm missing something.