Clipping

Ever have an image that is just a little to big to fit in the area you have for it. Or you would like to show only the part of the image that you're discussing but you don't want to create a separate image for each of these situations. Well than clipping may just be the solution you're looking for.

See the problem I have here? I could just crop it in an image editing program, but what if I wanted to display the full image and then just some part of it later in the same page? If I created two separate images, this would increase the size of the page to be downloaded. This is where clipping can come in handy.

Above you can see the CSS style definitions and their result for clipping an image. It's important to note here that you must declare positioning. I'm told that you can declare it as relative, but every time I use clipping, absolute is the only one that seems to work. Also, since I had to declare it as absolute and not relative, the browser didn't recognize the space it was using so this paragraph was under it. To counter this I just used the old web designers trick of inserting a 1 pixel transparent .gif image and setting its dimensions to what was necessary to move the content down below the clipped image. Just look at the source code for this page if you don't understand what I'm talking about.

When you declare your clipping rule, you must declare a shape (rect). Right now this is the only shape available. Maybe some others will be available in the future, but for now you must still declare it.

Next you must define what areas you want clipped in relation to the top-left corner of the image. This is where it gets a little tricky. (20px 370px 220px 100px) The order of the numbers goes in the usual clockwise way, starting from the top, then right, bottom and left sides. What's complicated here is that for the top and left sides, the image will be clipped starting from the images edge and going until it reaches the point defined. For the right and bottom sides it won't start clipping until it reaches the defined points and will clip to the edge. To help remember this, I say for left and top- clip until it reaches this point and for right and bottom- don't start clipping until it reaches this point. You also only have two values to choose from for clipping, auto which lets the browser decide and pixels. I prefer declaring them all myself even if it is 0px.

Clipping's pretty easy once you've tried it. Some thing to know about it is that the image is still all there, you've just hidden parts of it so the file size is still the same. Because of this it has limited uses. Two I can think of are if you want to show parts of the same image on the same page as I've done here or if you only need to remove a little bit and it's not going to change the images file size enough to warrant creating a different version.

Now that we've gotten through clipping, lets move on to something that also deals with content that's to big for the area you have for it and another way of dealing with it, overflow.