How to center and crop an image to always appear in square shape with CSS?

Question

I need to always crop a random-sized image to a square 160x160 using only CSS. The images should stay centered when cropped.

My markup should be:

<         


        

Answer 1

Try putting your image into a container like so:

HTML:

CSS:

div
{
    width: 200px;
    height: 200px;
    overflow: hidden;
}

div > img
{
    width: 300px;
}

Here's a fiddle.