How to "crop" a rectangular image into a square with CSS?

novicePrgrmr picture novicePrgrmr · Mar 1, 2013 · Viewed 255k times · Source

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

Answer

Peter Kionga-Kamau picture Peter Kionga-Kamau · Aug 12, 2016

A pure CSS solution with no wrapper div or other useless code:

img {
  object-fit: cover;
  width:230px;
  height:230px;
}