How to “crop” a rectangular image into a square with CSS?

I know that it is impossible to actually modify an image with CSS, which is why I put crop in quotes.

What I’d like to do is take rectangular images and use CSS to make them appear square without distorting the image at all.

I’d basically like to turn this:

enter image description here

Into this:

enter image description here

11 Answers
11

Leave a Comment