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.