3 Ways To Clip Or Crop Images In HTML CSS (Simple Examples)

Welcome to a quick tutorial on how to clip (or crop) images in HTML and CSS. Don’t have Photoshop? Or don’t want to go through the trouble of installing image editors? Yes, it is possible to crop or clip images using only CSS – Read on for the examples!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TLDR – QUICK SLIDES

[web_stories_embed url=”https://code-boxx.com/web-stories/how-to-clip-crop-images-html-css/” title=”How To Clip Crop Images HTML CSS” poster=”https://code-boxx.com/wp-content/uploads/2022/03/STORY-HTML-20230505.webp” width=”360″ height=”600″ align=”center”]

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

 

THE ORIGINAL IMAGE

 

METHOD 1) BACKGROUND IMAGE CROP

<style>
.cropA {
  /* (A) DESIRED DIMENSIONS */
  width: 300px; height: 300px;
 
  /* (B) SET BACKGROUND IMAGE */
  background-image: url("sunset.webp");
  background-repeat: no-repeat;
 
  /* (C) POSITION BACKGROUND IMAGE */
  /* (C1) AUTO CENTER */
  background-position: center;
 
  /* (C2) OR MANUALLY SPECIFY POSITION *
  background-position: -100px 0px; */
}
</style>
 
<div class="cropA"></div>

First, let us start with a traditional method – Setting the image as the background and positioning it.

1. First, we create a <div class="cropA"> container and set it to the required dimensions.
2. Then, set the background-image.
3. Lastly, use background-position to “shift” the image to the desired part. The easy way is to use center to automatically center the image, or you can also manually define how much to shift with X-POSITION Y-POSITION.

 

 

METHOD 2) CSS CLIP

<style>
/* (A) SQUARE CONTAINER */
.cropB {
  /* (A1) DESIRED DIMENSIONS */
  width: 300px; height: 300px;
 
  /* (A2) REQUIRED FOR (B2) */
  position: relative;
}
 
/* (B) IMAGE */
.cropB img {
  /* (B1) CLIP IMAGE */
  /* RECT(TOP, RIGHT, BOTTOM, LEFT) */
  clip: rect(0, 300px, 300px, 0);
 
  /* (B2) POSITION IMAGE */
  position: absolute;
  top: 0; left: 0;
}
</style>
 
<div class="cropB">
  <img src="sunset.webp">
</div>

Next, we have a slightly more “advanced” method using CSS clip.

1. Create a <div class="cropB"> container as usual, but we sandwich the <img> inside now. Otherwise, it’s the same old “set desired dimensions” here.
2. Take note, we are no longer using background-position.
   • (B1) clip: rect(0, 300px, 300px, 0) will clip out a 300 X 300 square from the top-left corner.
   • (B2) For clip to work, the image needs to be set to either absolute or fixed.

So, how do clip an area that is not starting from the top-left corner? For example, we start from 100, 100 instead.

• The new clipping area will be:
  • Top – 100px
  • Right – 100px + 300px = 400px
  • Bottom – 100px + 300px = 400px
  • Left – 100px
• To “shift” the frame back, we need to reposition accordingly.
  • top: -100px
  • left: -100px

 

 

METHOD 3) CSS CLIP PATH

<style>
/* (A) CLIP CIRCLE */
.cropC { clip-path: circle(30%); }
 
/* (B) CLIP TRIANGLE */
.cropD { clip-path: polygon(50% 0, 0 100%, 100% 100%); }
 
/* (C) CLIP DIAMOND */
.cropE { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
 
/* (D) CLIP STAR */
.cropF { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
</style>
 
<img src="sunset.webp" class="cropC">
<img src="sunset.webp" class="cropD">
<img src="sunset.webp" class="cropE">
<img src="sunset.webp" class="cropF">

Lastly, if you want to clip out a circle, diamond, pentagon, hexagon, and all kinds of funky shapes – clip-path is the way to go. But as you can see, manual calculations are a hassle. So use online tools such as Clippy to help you generate the coordinates fast.

 

 

 

NOT “REAL CLIP”

Congratulations, you have learned how to “clip” images in HTML and CSS. But take note, the original image itself is left untouched. We are merely clipping and positioning the full image in HTML/CSS.

This is not very healthy for performance, and can potentially slow a website down for massive galleries. So weigh your options carefully, using an app to crop images still has perks.

 

COMPATIBILITY CHECKS

• CSS Clip – CanIUse
• CSS Clip Path – CanIUse

As at the time of writing, clip-path is still not very well supported. Do take extra care if you want to adopt it.

 

LINKS & REFERENCES

• CSS Clip – MDN
• CSS Clip Path – MDN
• CSS Scale – MDN

 

INFOGRAPHIC CHEAT SHEET