CSS scale and square center crop image

by

You can do this easily in CSS if you use background-image.

.thumb {
    display: inline-block;
    width: 200px;
    height: 200px;
    margin: 5px;
    border: 3px solid #c99;
    background-position: center center;
    background-size: cover;
}

In this fiddle, first image is 400×800, second image is 800×400:

http://jsfiddle.net/samliew/tx7sf

Leave a Comment