background-size contain, but don't scale up - html

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.

Answer 3

You may use this JQuery fix:
$('.target').each(function() {
if ($(this).css('background-size') == 'contain') {
var img = new Image;
var currObj = $(this);
img.src = currObj.css('background-image').replace(/url\(|\)$/ig, "").replace(/"/g, "").replace(/'/g, "");
img.onload = function(){
if (img.width < currObj.width() && img.height < currObj.height()) {
currObj.css('background-size', 'auto auto');
}
}
}
});

Answer 4

To get the natural width / height, you could put the background image in the html and hide it, then grab the image width / height with script.
HTML:
<div></div>
<img id="background" style="display: none" src="http://cdn4.iconfinder.com/data/icons/silent_night_icons/128/santa.png" />
JS:
var backgroundSize = $('#background').css('width');

Answer 5

I use two approaches:
1 - Object-Fit
This has good browser support: https://caniuse.com/#feat=object-fit
.container {
position: relative;
width: 200px;
height: 200px;
/* Just for style */
display: inline-block;
background: rgba(0,0,0,0.2);
margin: 10px;
}
.container img {
width: 100%;
height: 100%;
object-fit: scale-down;
}
<div class="container">
<img src="https://picsum.photos/300/200">
</div>
<div class="container">
<img src="https://picsum.photos/200/300">
</div>
<div class="container">
<img src="https://picsum.photos/100/100">
</div>
2 - Position and Transform
When you need to target older browsers, this works equally well with no change to your markup
.container {
position: relative;
width: 200px;
height: 200px;
/* Just for style */
display: inline-block;
background: rgba(0,0,0,0.2);
margin: 10px;
}
.container img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100%;
}
<div class="container">
<img src="https://picsum.photos/300/200">
</div>
<div class="container">
<img src="https://picsum.photos/200/300">
</div>
<div class="container">
<img src="https://picsum.photos/100/100">
</div>

Answer 6

CSS Solution: You need to know the height and width of the image.
#media screen and (max-width: 640px) and (max-height: 480px) {
div {
background-size: contain !important;
}
}
div {
background: #000 url('https://i.imgur.com/someimage.jpg') no-repeat center center;
background-size: 640px 480px;
}
Where the image url is https://i.imgur.com/someimage.jpg and the width and height of the image is 640px and 480px respectively.