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

Spread the love

Sometimes, we want to crop a rectangular image into a square with CSS.

In this article, we’ll look at how to crop a rectangular image into a square with CSS.

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

To crop a rectangular image into a square with CSS, we use the object-fit: cover; style.

For instance, we write

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

to set the img element’s width and height to the same value to make it a square.

And then we use object-fit: cover; to crop the image so that it fits the square.

Conclusion

To crop a rectangular image into a square with CSS, we use the object-fit: cover; style.

Leave a Reply

Your email address will not be published. Required fields are marked *