CODEWITHSUNDEEP
css
Mattc0m
Mattc0m

Reputation: 291

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

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 centered within the div, instead of a more hack-y solution using img elements.

The issue: I am using a fluid, responsive grid, so when the browser is below the max width (1000px), the div elements begin to shrink. This causes some of the client logos (the background images) to clip at the edges. This is a given. I would like to have these images begin to scale down when the hit the edges of the parent element.

background-size: contain partially solves this. The only drawback is that it also scales the background image's size above 100%, which is an issue. It stretches the logo which is not a good solution for me.

I could also just not use background-size, and have the client logos have a max-width set. This, however, causes the client list to go to extra rows for responsive layouts. I would like to avoid this, but to me this is the only working solution.

That being said, is there anyway to utilize the background-size without having it scale up? Or is there another way to approach this that would keep the images centered within their box?

Here's quick look at the code:

HTML

<div class="client"><div class="client1"></div></div>
<div class="client"><div class="client2"></div></div>
<div class="client"><div class="client3"></div></div>

CSS

.clientlist .client { width: 20%; height: 90px; float: left; } /* Five clients a row */
.clientlist .client div { 
    width: 100%; 
    height: 100%; 
    background-position: center center; 
    background-repeat: no-repeat; } /* Vertically centers background images */
.clientlist .client .bcs { background-image: url(../images/client-bcs.jpg); } /* bunch more like this to define image */

Upvotes: 4

Views: 3212

Answers (2)

Jeff
Jeff

Reputation: 21

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.

Upvotes: 2

vals
vals

Reputation: 64164

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.

Upvotes: 0

Related Questions