Fill container without expanding image - html

Question

I am currently using background-image: url() with background-size: contain in order to have an image fill it's container. This works well for large images, as they are automatically reduced in size to fill the space without clipping or stretching the image, irrespective of the relative aspect ratio of the image and the container.
However if the image is smaller than the container in both height and width, the image will be expanded, which often makes the images appear fuzzy or pixelated.
Is it possible in CSS to have smaller images display in their original size, whilst retaining the above behaviour for larger images?
I expect I could code something in Javascript to compare the image and container size, and apply a different style, but I wondered if there was a pure css solution?
This is for a photo gallery type application on a public website so needs to support all the current commonly used browsers.

Answer 1

You need to compare the background image height with the container element height and apply background-size property accordingly.
See below code OR fiddle
HTML
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
CSS
#example1 {
background-image: url('http://www.w3schools.com/css/img_flwr.gif');
background-repeat:no-repeat;
background-size: contain;
padding: 15px;
}
JS
var image_url = $('#example1').css('background-image'),
image;
// Remove url() or in case of Chrome url("")
image_url = image_url.match(/^url\("?(.+?)"?\)$/);
if (image_url[1]) {
image_url = image_url[1];
image = new Image();
// just in case it is not already loaded
$(image).load(function () {
//alert(image.width + 'x' + image.height);
if($('#example1').height() > image.height ){
alert("background height is smaller than it's containner height");
$('#example1').css('background-size', 'auto');
}
});
image.src = image_url;
}
Fiddle
https://jsfiddle.net/guruling/ujwu5zvn/

Answer 2

A pure CSS solution is only possible with different HTML
If you can switch to using <img> tags instead of background images, you can make the image stretch the container to certain extent and cut off anything that doesn't fit.
You simply need to turn the logic around and let images be whatever size they want to be initially, up to a limit defined by max-width. Images larger than this size will be downscaled to fit the container, while images smaller than this will keep their original size and their container will wrap them nicely.
You can also define a max-height on your container to keep your layout tidy and clip the parts of the image that would overflow it.
The HTML:
<div class="container">
<img src="whatever.jpg" class="dont-uglify-pls"
</div>
The CSS:
.container {
max-width: 10em; /* or whatever limit you want your images to start downscaling at */
max-height: 10em; /* or whatever your layout looks like */
overflow: hidden;
}
.container .dont-uglify-pls {
width: 100%;
height: auto;
display: block;
}
If you need more content in there
Simply slap position:relative on the container and fill it with absolutely positioned elements.