Faux Crop any size image with CSS

Here’s a quick tip on how to crop any sized image through CSS and an extra div. This technique comes in very handy when building websites for clients who don’t have Photoshop, or understand what 360px x 240px means. In an ideal world every image is edited and cropped before it’s uploaded to the site, so that it fits perfectly where it’s supposed to. Unfortunately that’s not how it works and many sites end up with squished, stretched, or highly pixellated images.

The key to this technique is to wrap the image you want to display in a container div, which we’ll give a specific height and width. We’ll then give the image a width of 100% just in case the user uses an image that’s too small. Here’s the code:

The html:

<div class="container">
	<img src="http://your-source.com" alt="alt" />
</div>

And the CSS:

.container {
	width: 418px;
	height: 240px;
	overflow: hidden;
}

.container img {
	width: 100%;
}

The real key there is the overflow: hidden; part. It prevents any image that is larger than the crop area from being displayed. Adding width: 100%; is only helpful when the user uploads an image smaller than the are you want cropped. The image will be enlarged to fit the area – which may result in some pixellation – so if crisp images outweigh the need for them to fit correctly, just skip that part.

Happy cropping! And leave a comment.

29 thoughts on “Faux Crop any size image with CSS

  1. Thanks for the tiaorutl! I’m almost there, but for some reason my images open up in a new window, and do not replace the other image. Please help! Thanks!

  2. Thank you so, so much! Such an easy and elegant fix for something that has been driving me mad for the last 4 hours!

    Honestly, people, like yourself who post things like this, really are exceptionally wonderful human beings! 🙂


    1. .container {
      width: 418px;
      height: 300px;
      overflow: hidden;
      }
      .container img {
      width: 100%;
      margin-top: -100px; /* -100px will crop from the top so change this value until it\'s around the middle of the image */
      }

  3. Thanks this was a great tip and I used on a site to do exactly that, now the image stays in the box even though it\’s bigger than the box size – perfect!

  4. Awesome, just what I needed. Though like Hemali, I would like to crop the top off too.

    I not an expert, but this seemed to work:

    .container img { width: 100%; position: relative; top: -15px;}

    The above appears to crop the top 15px off the image.

    -Timbo

  5. @Timbo,

    That will certainly work if you want every image to be bumped up 15px. If it\’s just for one image or a set of images, I\’d create a special class and add the positioning to that.

  6. NICE!!! In practice I found that this code only works if all of the images are taller than they are wide. I had to add some server code to determine whether the width was greater than the height and then apply the width:100% (or height:100%) as an inline style.

    Am I missing something?

    1. Hi Andrew. I\’m not sure what the end goal for your site is but this technique is meant to crop an image to fill a defined area. I wrote it quite a while ago, and while it still gets some a few hits, there are perhaps better ways to manage images these days – Especially when designing responsively or fluidly.

  7. Is it Possible to create full-width image using faux crop. Skewing issues occured..Please help to solve

    1. I wouldn\’t use this technique to display a full width image. Might be best to use it as a background-image and set the background-size as such:

      [css]
      background-size: cover
      [/css]

Leave a Reply

Your email address will not be published. Required fields are marked *

Ready for a refreshing experience on your next website design?