In this post, we are going to learn about how to crop images in CSS.

To crop images in CSS, we can use object-fit property. The object-fit property allows to choose how element should be resized to its container.

You apply object-property to your image’s CSS class along with the required height and width like this.

<img src="/data/poopc/images/homepage.png"  class="homeimg" />

.homeimg{
  width:800px;
  height:500px;
  object-fit:cover;
}

To crop the image in square shape, height and width should be the same value.

.homeimg{
  width:500px;
  height:500px;
  object-fit:cover;
}

To crop the image in circle shape, add border-radius property with value as 50%.

.homeimg{
  width:500px;
  height:500px;
  object-fit:cover;
  border-radius:50%;
}

Cropping background images

To crop background images, set the background-position property to center and background-size property to cover along with height and width.

.bgimg {
  background-position: center;
  background-size: cover;
  height: 500px,
  width: 500px,
}