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.
