How to Crop an Image Using CSS

CSS is the style sheet language that offers hundreds of properties to style HTML elements. More specifically, the “<img>” tag is used in HTML to embed an image into the document. However, if it is required to adjust and as well as to crop the images, you can utilize the “overflow”, “background-image”, “object-fit”, or “object-position” CSS properties.

This write-up will discuss:

• Method 1: How to Crop an Image Through “overflow: hidden” Property?
• Method 2: How to Crop an Image Through “background-image” Property?
• Method 3: How to Crop an Image Through “object-position” and “object-fit” Properties?

Prerequisite: Creating an HTML File

To embed an image in the HTML document, follow the mentioned instructions:

• Add a “<div>” tag to create a division and assign it a class “img-crop-div”. Implement the “style” attribute to set the element’s “margin” property.
• Then, utilize the HTML <img> tag with the “src”, “width”, and “height” attributes to embed an image in the document.
• The “src” attribute sets the source URL.
• The “width” defines the image’s width.
• The “height” determines the image’s height.

HTML

It can be observed that we have successfully added the image to our web page:

Method 1: How to Crop an Image Through “overflow: hidden” Property?

When the content of the element is too large to fit within the designated area, the “overflow” property is defined to add scroll bars. Moreover, it can also be utilized for cropping the added image.

For better understanding, let’s style our container.

Style “img-crop-div” class

The “.img-crop-div” is defined to access the class “img-crop-div”. The “height” and “width” CSS properties are utilized to allocate the image area. Then, the remaining area is clipped using the “overflow” CSS property along with the value “hidden”.

Output

Adjust the Position of Cropped Image

Now, we will see how to adjust the image position:

By utilizing the “margin” property with the specified values for the top, right, left, and bottom helped us in adjusting the position.

Output

Method 2: How to Crop an Image Through “background-image” Property?

The “background-image” CSS property is used to specify the background images. However, an image can be cropped using this property. To do so, first, set the width and height of the <div> containing an image. As a result, the image will be shown within the specified area.

Let’s implement the above-discussed scenario in CSS:

Here, the “background-position” property is utilized for adjusting the initial position of the image.

Output

How to Crop an Image Through “object-fit” and “object-position” Properties?

CSS “object-fit” property can be specified to crop images easily. It has five values, but the “cover” is the most appropriate one to use for cropping images.

In CSS, add the following code snippet for the “img-crop-div” class:

Here is the description of the given properties:

• By using the “object-fit: cover” property value, the image’s aspect ratio is maintained while still fitting into the container box.
• The “object-position” property sets the image’s area to crop.

Output

We have compiled the methods to crop an image using CSS.

Conclusion

To crop an image in HTML, several CSS properties can be utilized. The most commonly used properties to crop images are “overflow” with “width” and “height”, “background-image”, “object-fit”, and “object-position”. This post has described multiple methods for cropping an image using CSS.