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.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Clip Image Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

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.

 

 

CLIP/CROP IMAGE IN HTML CSS

All right, let us now walk through the examples of how to crop or clip an image in HTML CSS.

 

THE ORIGINAL IMAGE

 

METHOD 1) BACKGROUND IMAGE CROP

1-background.html
<style>
.cropA {
  /* (A) DESIRED DIMENSIONS */
  width: 300px; height: 300px;
 
  /* (B) SET BACKGROUND IMAGE */
  background-image: url("sunset.png");
  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

2-clip.html
<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.png"/>
</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

3-clip-path.html
<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.png" class="cropC"/>
<img src="sunset.png" class="cropD"/>
<img src="sunset.png" class="cropE"/>
<img src="sunset.png" 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.

 

 

USEFUL BITS & LINKS

That’s all for the main tutorial, and here is a small section on some extras and links that may be useful to you.

 

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

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

 

INFOGRAPHIC CHEAT SHEET

How To Clip Images In HTML CSS (Click To Enlarge)

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published.