Question

I have the following HTML, which I could change, but would prefer to keep simple as it is.

<div class="c">
     <img ...>
</div>

The image will be a variable size, and should be centered vertically within the div. I’m currently using the following CSS:

.c {
    width: 40px;
    height: 40px;
    overflow: hidden;
}
.c img {
    width: 40px;
    height: auto;
}

I’ve tried using the table and table-cell method in CSS, but the container expands to fit the image, even with overflow: hidden. I’ve considered server-side methods, like using position: relative with a negative top value on the <img>, but would prefer not to use any additional server-side processing on the page if I don’t have to. I do not want to use JavaScript, so if that’s my only other option, I’ll just do it server-side.
I should mention, the image will always be 40x40px or larger.

This fiddle demonstrates what I was attempting with display: table.

Answer 1

I’ve decided on a simpler method, that will not scale images on older browsers, but will on newer ones, as well as use much less code. The HTML can basically just be a <div> tag, with this CSS.

div.image {
    background: url(IMAGE) center center no-repeat;
    background-size: cover;
}

The background-size: cover will allow CSS3-compliant browser to scale the image to fit the div, while older ones will still center the image, but not scale it. It’s not a perfect solution, but will certainly work for my case.