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.
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”.
Adjust the Position of Cropped Image
Now, we will see how to adjust the image position:
margin: -75px 0 0 -100px;
By utilizing the “margin” property with the specified values for the top, right, left, and bottom helped us in adjusting the position.
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.
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:
object-position: 30% 10%;
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.
We have compiled the methods to crop an image using CSS.
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.