. Advertisement .
..3..
. Advertisement .
..4..
Sometimes, it is vital to resize your image to fit it in the program or run the project. Yet, you cannot crop it perfectly without the right method.
How to crop an image in HTML to preserve the original aspect ratio and avoid distorting? This post will reveal the answer.
How To Crop An Image In HTML
Method 1: The <img> Tag With OBject Position And Object Fit
The most basic approach is to use the <img> tag with two properties: object fit and object position. The first function has a specified size, enabling users to set the reconciliation strategy.
<html>
<head>
</head>
<body>
<div>
<h3> Original image: </h3>
<img src="image url">
<h3> Cropped image using object-fit: </h3>
<img
class="cropped1"
src="image url
>
<h3> Cropped image adjusted with object-position: </h3>
<img
class="cropped2"
src="image url"
>
</div>
</body>
</html>
On the other hand, the object position property helps transition the object.
Method 2: Use Height, Width, And Overflow
You can also make the best of the overflow, height, and width property. Set overflow:hidden to activate this function. This way, you can ensure the base container retains its structure.
The margin property will be used to adjust the cropped area. It takes four values, two of which represent the pixels from the left and top.
<html>
<head>
</head>
<body>
<h3> Original image: </h3>
<img
src="image url"
>
<h3> Cropped image: </h3>
<div class="cropped">
<img
src="image url"
>
</div>
</body>
</html>
Method 3: Clip-path For Complex Cropping Paths
Here is the syntax for a clip-path property:
.clipped-image {
clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none
}
The geometry-box and basic-shape operate on the predefined set of shapes. The former one lets you use SVG syntax for cropping. It helps limit the cropped area to reduce the risk of over-cropping.
<section class="examples">
<figure>
<div class="original-image"></div>
<figcaption>
<p>Original Image</p>
</figcaption>
</figure>
<figure>
<div class="original-image basic-shape-inset"></div>
<figcaption>
<p>Using <code>clip-path: inset(10px 30px 20px 40px)</code> for cropping</p>
</figcaption>
</figure>
<figure>
<div class="original-image basic-shape-circle"></div>
<figcaption>
<p>Using <code>clip-path: clip-path: circle(75px at 120px 120px)</code> for cropping</p>
<p>I've never met the syntax using <code>at</code> before. It positions the center of a cropping circle</p>
</figcaption>
</figure>
<figure>
<div class="original-image basic-shape-ellipse"></div>
<figcaption>
<p>Using <code>clip-path: ellipse(175px 80px)</code> for cropping</p>
<p>Specifying with <code>at</code> is also supported here</p>
</figcaption>
</figure>
<figure>
<div class="original-image basic-shape-polygon"></div>
<figcaption>
<p>Using <code>clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 25% 50%, 100% 100%)</code> for cropping</p>
</figcaption>
</figure>
<figure>
<div class="original-image basic-shape-path"></div>
<figcaption>
<p>Using <code>clip-path: path("M 100 400 L 100,200 A 5,5 0,0,1 300,200 L 300 400 Z")</code> for cropping</p>
<p>Using <code>path</code> gives an opportunity to crop using arcs</p>
</figcaption>
</figure>
</section>
Method 4: Border Radius With Round Cropping
This property allows you to set the border’s radius and hide all the overflow. This way, you can make rounded cropping and receive an invisible rectangular border.
.some-class {
border-radius: <required value>;
}
Conclusion
The article introduces four cropping methods to crop an image in HTML. Cropping is not as easy as it sounds. Without the proper method, you will surely fail to have a precise image to fit in the program or for processing.
So choose the one suiting your images and purposes.
Leave a comment