Css Globe CSS and Web Design News

This article is a summary of a 3 fast and easy CSS techniques you can use to display only a portion of an image in your content. All techniques explained here actually need only couple of lines of CSS. However, it is not cropping in a real sense of the word, we are not cutting the image down to a certain size (CSS can't do that yet) we are merely hiding the "extra" and displaying only a part of the image we want. That's why I call it Faux Image Cropping.
These techniques can be very helpful if you need to keep images at a certain size, i.e. thumbnails in the news section or something similar. Being able to use CSS to control which portion of image to display is a great bonus.

Please note that I am using these techniques on content images (IMG element), not background images.

Technique 1 - Using Negative Margins

Take a look at the demo

With this technique image needs to be placed into parent element, in my case a paragraph. Parent paragraph must be a floating element (or set to a certain width). This technique will not work on full width (block) elements.
We then set negative margins for all 4 sides: top, right, bottom and left. Negative margins define the how far will image be pulled in each direction leaving only part of the image inside the parent. When we set parent's overflow property to hidden we hide the area if the image that is outside the parent - and achieve our goal. You should really play around with the values to get the proper feel of how it works.

So the HTML will look like this:

<p class="crop"><a href="http://templatica.com" title="Css Templates"><img src="img.jpg" alt="css template" /></a></p> 

and the CSS:

.crop{
	float:left;
	margin:.5em 10px .5em 0;
	overflow:hidden; /* this is important */
	border:1px solid #ccc;
	}
	/* input values to crop the image: top, right, bottom, left */
.crop img{
	margin:-20px -15px -40px -55px;
	}

Technique 2 - Using Absolute Positioning

Take a look at the demo

If you don't feel good about using negative margins I suggest using this technique. It involves parent (paragraph) that has a specific width and height. Paragraphs's position property is set to relative. Width and height define the size of the area being displayed. Image placed inside the paragraph has it's position property set to absolute. We can then position it with top and left property and by doing that define which part of the image we'd like to display.

HTML is identical as in previous technique:

<p class="crop"><a href="http://templatica.com" title="Css Templates"><img src="img.jpg" alt="css template" /></a></p> 

and the CSS:

.crop{
	float:left;
	margin:.5em 10px .5em 0;
	overflow:hidden; /* this is important */
	position:relative; /* this is important too */
	border:1px solid #ccc;
	width:150px;
	height:90px;
	}
.crop img{
	position:absolute;
	top:-20px;
	left:-55px;
	}

Technique 3 - Using Clip Property

Take a look at the demo

This technique should be the easiest as clip property defines the portion of the element that should be visible. This sounds like a perfect solution but there's one catch: the clipped element must be positioned absolutely. To keep the element in the flow we'll have to add additional element, calculate the size of the visible area of the image, add that size to parent, float the parent... A lot of work, don't you think?
Oh, there's one more catch: the clipped element's size is not reduced to cropped portion, it keeps the original size (width the clipped out area being hidden). We have to use absolute positioning to move the visible area to the top left corner of the parent.

However the clip property shouldn't be left unmentioned here so here goes the code...

HTML is somewhat changed here:

<div class="crop"><p><a href="http://templatica.com" title="Css Templates"><img src="img.jpg" alt="css template" /></a></p></div>

here's the CSS:

.crop{
	float:left;
	position:relative;
	width:150px;
	height:90px;
	border:1px solid #ccc;
	margin:.5em 10px .5em 0;
	}
.crop p{
	margin:0;
	position:absolute;
	top:-20px;
	left:-55px;
	clip:rect(20px 205px 110px 55px);
	}	

Conclusion

If you carefully look at the examples one by one you will notice that they all look exactly the same. This once again proves that there are many ways to achieve the same things with CSS. If you ask me, for this particular effect, I would use technique number 1. - negative margins. It is the easiest and fastest of them all plus, when editing, you don't have to change parent values: just change the negative margins and the parent element will adjust.
Hope you liked the article, don't forget to bookmark! :)