Skip to content

How to crop images in CSS

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,
}

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.