Crop Images With CSS

Here's a simple trick that will let you "crop" an image using CSS and HTML without actually having to edit the image. We'll be the first to admit that this is a bit of a hack – if you have the time, you should really edit the images themselves instead. But, if you're looking for a shortcut, this can come in pretty handy.

We're going to be taking this penguin – he's 111 x 193 pixels now – and cropping him down to 51 x 133, cutting equal parts off the top and bottom, left and right. That's 30 pixels off of each dimension.


First, create a container <div> with your new height and width specified. Make sure that overflow is hidden. Next, place your image in the middle with the full dimensions specified, but also with a negative margin-left and margin-top. If you're wanting to center the cropping, both of those should be exactly half the number of pixels you're wanting to reduce the height or width by.

That sounded more complicated than it actually is. Here, take a look at this example instead:

1.   <div style="width:51px;height:133px;overflow:hidden;">
2.   <img src="../images/inkplant/code/penguin.jpg" style="width:111px;height:193px;margin-left:-30px;margin-top:-30px;" alt="Cropped Penguin" />
3.   </div>

And here's the resulting penguin, or at least the parts of him that we've left:

Cropped Penguin

Don't worry, no real penguins were harmed in the making of this post.



This post was published on September 20th, 2014 by Robert James Reese in the following categories: CSS, HTML, and Images. Before using any of the code or other content in this post, you must read and agree to our terms of use.