How To Crop An Image Using The CSS Clip Property

Have you ever wanted to crop one of your images and focus on just a section of it without editing it in Photoshop? Sure it doesn't take long using the Adobe software, but what if you could do it even quicker with code? I'll show you how! With this basic tutorial, I will show you how to crop any image using the CSS clip property. Let's begin.

The Demo:

Above is the image I am going to use to crop. It's a concept illustration I drew years back.

First, you'll need to upload and host the image you want to crop. If you need an image host, try tinypic.com, they're free.

Second, once the image is hosted you'll need to place it within the HTML img tag, as shown below:

<img title="IMAGE TITLE" src="IMAGE HOST URL GOES HERE" alt="IMAGE ALT ATTRIBUTE HERE">

Third, create the CSS code that will be called within the HTML img code as a class, as shown below:

<style>

.imgCrop {
position: absolute;
clip: rect(105px,728px,265px,0px);
}

.divimgCrop {
margin-top:-105px;
margin-bottom:280px;
}

</style>

A basic overview of the numbers used in the above CSS:

105px - the image's visible top is 105px down from the top of the actual image
728px - the width of the visible image
265px - the height of the image from the visible top starting point (105px)
0px - visibility of the left side of the image
-105px - the top margin of the image as it sits on the webpage
280px - the bottom margin of the image as it sits on the webpage

Fourth, add the surrounding <div> tags and both of the CSS classes to your image HTML, as shown below:

<div class="divimgCrop">
<img class="imgCrop" title="IMAGE TITLE" src="IMAGE HOST URL GOES HERE" alt="IMAGE ALT ATTRIBUTE HERE">
</div>

Fifth, host your CSS code and upload your HTML code to the appropriate locations on your website. If you want to view a preview of your work before you add it to your site you can use the w3schools code editor.

And finally... let's view the finalized demo using this code:

I will wrap things up by putting the finalized HTML and CSS code below:

HTML:

<div class="divimgCrop">
<img class="imgCrop" title="" src="" alt="">
</div>

CSS:

<style>

.imgCrop {
position: absolute;
clip: rect(105px,728px,265px,0px);
}

.divimgCrop {
margin-top:-105px;
margin-bottom:280px;
}

</style>

Let me know your thoughts on this tutorial and any suggestions in the comments below. If you would like further information on this subject visit w3schools.com.