CSS Background size: contain image without scaling

Question

I have a fixed Div width / height that holds images as a background.

I want them to fit in a div without overflow - this is the ideal situation for

background-size: contain;

But if the image is smaller than the Div, it scales. I do not want it. What I'm looking for is something like max-width and max-height for the background image.

Here you can see a simple example (with random images) of my problem: http://jsbin.com/uQevuna/1/edit

Unable to change the html code of the page.

Answer 1

This cannot be done with help background-sizebecause they do not take into account the original size of the image.

display: table-cell

HTML:

<div class="wrap">
    <div>
        <img src="http://placekitten.com/200/200" alt="" />
    </div>
</div>

CSS

.wrap {
    display: table;
}
.wrap div {
    width: 300px;
    height: 300px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}