HTML

How to crop an image in HTML

February 7, 2022

How to crop an image in HTML

In this article we will learn how to crop an image in HTML, that is, it will fill our container perfectly without distortion.

crop an image in HTML cover

What’s up programmer, ok? Do you want to learn something new?

We often need to insert images in <divs>, and the images are not always correctly positioned

And they can even distort, as they are not the same size

So with some CSS in our HTML, we can solve this problem

The central idea is to add the image to the background of a <div> by CSS

And this way, it will never be distorted, as the image is the background and not limited to the width and height of the div

Let’s see in practice, here’s the HTML:

<!DOCTYPE html>
<html>
<head>
 <title>Como recortar uma imagem no HTML</title>
 <meta charset="utf-8">
</head>
<body>
 <div id="container"></div>
</body>
</html>

Now let’s go to the CSS, which will insert the image at the bottom of the div:

#container {
 width: 1200px;
 height: 400px;
 background-image: url('./bg-img.jpg');
}

We will have this result:

See that the image does not distort the width of the container is respected, we can also reposition this image, see it:

#container {
 width: 1200px;
 height: 400px;
 background-image: url('./bg-img.jpg');
 background-position: -100px -450px;
}

The result:

Or let it adapt to the space we have:

#container {
 width: 1200px;
 height: 400px;
 background-image: url('./bg-img.jpg');
 background-size: cover;
}

The result:

The background-size property with a value of cover, makes this image adaptation for us

Also test other values for background-position and background-size

You may find one that better aligns with your project needs.

Conclusion

In this article we learned  how to crop an image in HTML, but we actually use CSS for it 😀

Instead of using the img tag, it’s always good to think about the possibility of background-img

that solves these cases where the image distorts, because of the size mismatch of the divs

Want to learn more about HTML and CSS? Click here!

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x