How to Crop an Image in HTML

1. Use the width, height, and overflow CSS Properties to Crop Image in HTML
2. Use the object-fit CSS Properties to Crop Image in HTML

In this article, we will introduce methods to crop an image in HTML.

Use the width, height, and overflow CSS Properties to Crop Image in HTML

Along with width and height, CSS containers also have an overflow property that can be used for image cropping. To activate the overflow property, we should enclose the image within a div of a particular width and height and set overflow to hidden. It will ensure that the base container will retain its structure, and any image overflow will be hidden behind the container. Lastly, we can use the margin property to adjust the cropped area. This property takes four values. However, only the first and last of the four values are essential as they represent the pixels from the top, and the left, respectively.

For example, insert the image with the URL /img/DelftStack/logo.png in two different containers. Give the second image a class cropped so that we can apply some styles to it and crop the image. In CSS, select the cropped class and set height and width to 150px. Set the overflow property to hidden. Next, create a border. Now, select the img tag of the cropped class and set its margin as margin: -10px 0px 0px -180px.

In this way, we can crop an image in HTML using CSS.

Example Code:

<h3> Original image: </h3>
<img
    src="/img/DelftStack/logo.png"
    >
<h3> Cropped image: </h3>
<div class="cropped">
    <img
        src="/img/DelftStack/logo.png"
        >
</div>

.cropped {
     width: 150px;
     height: 150px;
     overflow: hidden;
     border: 5px solid black;
}

 .cropped img {
     margin: -10px 0px 0px -180px;
}

Use the object-fit CSS Properties to Crop Image in HTML

The object-fit CSS property helps to crop the images. It can have five values, but the value cover is the most suitable to crop an image. Setting object-fit to cover will preserve the image’s aspect ratio while still fitting into the size of its content box. We can also use the object-fit property in conjunction with object-position to adjust the area of the image to crop. The object-position property requires two values: x% and y% to position the image (the default position is 50% 50%). We can also provide pixel positions: xpx and ypx, but that is usually not useful.

For example, insert the picture three times. The first picture is the original picture and, the two pictures will be the cropped pictures. Give the classes cropped1 and cropped2 to the second and the third pictures. Set a specific width, height, and border to these pictures. Use the object-fit property and set it to cover on both pictures. In the third picture, set the object-position property to 20% 10%.

In this way, we can crop an image in HTML using CSS.

Example Code:

<div>
    <h3> Original image: </h3>
    <img src="/img/DelftStack/logo.png">
    <h3> Cropped image using object-fit: </h3>
    <img
        class="cropped1" src="/img/DelftStack/logo.png">
    <h3> Cropped image adjusted with object-position: </h3>
    <img
        class="cropped2" src="/img/DelftStack/logo.png"> 
</div>

.cropped1 {
     width: 200px;
     height: 200px;
     object-fit: cover;
     border: 5px solid black;
}
 .cropped2 {
     width: 200px;
     height: 200px;
     object-fit: cover;
     object-position: 20% 10%;
     border: 5px solid black;
}