background-size contain, but don't scale up

Question

I set my background image to contain:

.el {     background: url(path/to/img.jpg) no-repeat center center;     background-size: contain; } 

But that scales the image up. I want the image to never be bigger than its native dimensions, and only scale down when it won't fit at its native resolution.

Here's a demo: http://jsfiddle.net/6W3yh/

---

I'm looking for a solution in CSS only.
No JavaScript please.

Answer 1

Unfortunately, what you want to do isn't possible in CSS.

Your best bet is to set the background-size using Javascript. However, if you want the image to scale down if the container is smaller than it, you will have to be able to retrieve the image's natural height.

if ($('.el').height() < imageHeight) {   $('.el').css('background-size', 'contain'); } else {   $('.el').css('background-size', 'auto'); } 

Answer 2

You could use Uncle Dave's Ol' Padded Box Technique for this. Here's a fiddle showing it in action.

div {     background: url(http://cdn4.iconfinder.com/data/icons/silent_night_icons/128/santa.png) no-repeat center center;     background-size: 100%;      width: 100%;     max-width: 128px;     height: 0;     padding-bottom: 100%; /* (Image Height / Image Width) * 100%; */ } 

The only problem is that you'll need to know the width of your image for this to work. If you're using a CSS preprocessor like Compass you could offload this work onto the processor instead of doing it manually. Look here for information on that.