CSS Image fit width and height

Question

I am trying to make an image fit to its container. The problem is, that I can only set it to fit to the width width: 100% or the height height: 100% but not both.

Basically it should check weather container length or height is smaller compared to image width and height (normalized) and adapt it to that. And it should also center the image.

This is standard behavior in Windows Photo Viewer. The image is always visible, centered and preservers the ratio. I am trying to make it exactly like that.

PS: I would prefer a css solution. But if it is impossible/very painful, js is also ok.

PSPS: Sorry if this is a duplicate. I searched the internet and found similar questions, but none of them seemed to had the right answer.

Answer 1

There are a few solutions to this. None of them perfect. And it usually depends if you want the image to be cropped or not.

If you're fine with cropping you can try something like:

<div class="image"></div>
<style>
    .image {
          width:250px;
          height:150px;
          background-image:url('http://lorempixel.com/400/200/');
          background-size:cover;
    }
</style>

If you don't want it to crop then it will depend how you want to lay out the image (or images). Here are a couple of examples:

• http://healy.rocks/gallery1 - Responsive gallery layout
• http://healy.rocks/gallery2 - Pinterest css layout with mansonry.js
• http://healy.rocks/gallery3 - Simple row css layout
• http://healy.rocks/gallery3b - Google images css layout wth rowGrid.js

Answer 2

You can set image with CSS background-image , like this:

div{
    width: 200px;
    height: 200px;
    background-image: url("http://i.imgur.com/cjgKmvp.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}

DEMO: https://jsfiddle.net/ue49awaL/8/