Centering image inside a div using CSS instead of jquery

Question

I\'m trying to fit any sized image inside a (always) square div, and retain the aspect when the size of the parent div changes. Here\'s what I\'m doing:

CSS:

<

Answer 1

The background solution that others have posted was my initial thought, but if you want to still use images then you could do the following:

CSS:

.photo_container {
    width: 250px;
    height: 250px;
    overflow: hidden;
    border-style: solid;
    border-color: green;
    float:left;
    margin-right:10px;
    position: relative;
}

.photo_container img {
    min-width: 100%;
    min-height: 100%;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

HTML:

This will make any image inside to be either 100% high or 100% wide, depending on the shortest attribute, and centralise them horizontally and vertically.

Edit

It's worth noting that transform is not supported in IE8 or Opera Mini - http://caniuse.com/#feat=transforms2d