CSS: keep aspect ratio when rendering an image

Question

a simple CSS problem:

• Display animal pictures in the grey box as shown in the picture below
• Image size must be 150x150 px
• However, I must maintain the aspect ration of the image, meaning not the whole of the image will fit into the 150x150 square.
• Since most of the images will exceed the allowed 150x150 dimensions, i would like to focus the display on the middle of the image.

Some HTML:

<div class="gallery-item" style="height: 232px;">
                    <img src="/media/animals/images/african-buffalo.jpg" alt="African Buffalo ">

                    <div class="gallery-item-caption">
                        <a href="/animals/african-buffalo" title="African Buffalo ">African Buffalo </a>
                    </div>
</div>

Some CSS:

.gallery-item {
float: left;
padding: 15px 15px 15px 15px;
margin: 15px;
background-color: #ececec;
}

View:

Answer 1

Instead of img you can set the background-image on divs. If you find that images don't fit well in a square (very wide images), you can change to background-size:cover. Idea taken from here, working example here

CSS

.gallery-item{
    width:50px;
    height:50px;
    border:solid 1px #000;
    margin:10px;
    background:url('http://lorempixel.com/100/200') center center no-repeat;
    background-size:100%;
}