CodeCodex @ whatisfound.com
There is actually a way using CSS alone to clip a picture (or any HTML element). Once you get past the initial thrill of Wow! CSS can do anything! there's a kind of but why bother? that soon follows. And I'm not sure I have an answer for that here. It is almost certainly a better idea to crop an image with an image editing program like Photoshop (or even MS Paint), because that will reduce the file size of your images, which will reduce page weight. The CSS clip property is therefore only really useful if you want to clip a picture on the fly, while the user is watching.
That said, if you're like me, you want to know how every little bit of available code works, because maybe, just maybe, one day you'll need it. So here is the breakdown of the CSS clip property.
(Click right image for a 'sliding window' clip effect)
And here's the CSS for the example above. (Note: the images are contained in a <div> tag that has id='example', and the second image is given class='clip')
div#example {
position: relative;
background-color: #333;
padding: 2px;
}
div#example img {
width: 45%;
}
img.clip {
clip: rect(50px, 187px, auto, 52px);
position: absolute;
right: 0;
bottom: 2px;
}
There are two important things to notice here. First, the clip property accepts a value that looks similar in form to a background-image: url("..."); value. You give it a shape to clip to (the only shape available at the time of this writing is a rectangle, denoted by rect), and then in parenthenses where the clipping should start for each side relative to the top-left point (see Caution block). The sides correspond to the usual CSS convention of TOP, RIGHT, BOTTOM, and LEFT. You can use any specific unit suffix (such as 'px' or 'em'), but not %. A setting of auto means that no clipping should be applied to that dimension. It's crucial to note that this is not the same thing as a value of 0 because...
Caution/Warning!
Unlike usual CSS convention, 'bottom' and 'right' do not refer to the bottom and right sides of the containing block, but rather where the bottom and right edges should be set from the top, left point. Therefore, clip: rect(0, auto, 0, auto); will hide the entire picture: the bottom and top properties are both set to the top of the image.
The second, and by far more baffling thing to know is the requirement of the position attribute. For the element to actually get affected by a clip rule, it must have a position of either 'absolute' or 'fixed'. Now, I have done absolutely no looking into the W3C specification surrounding the clip property, but I am coming up a little short on logical, intuitive reasons for why this would need to be the case. You don't actually need to move the <img> anywhere, as I have done here, just set it to position: absolute; and the clipping will kick in.
Notice that although you can see the background of the containing element behind the clipped image, the browser preserves the clipped area with respect to layout: Even though I have told the absolutely positioned image to move all the way to the right, it appears there is a great deal of padding to the image. This is actually just the hidden part of that image bumping into the parent container. However, clicking on an area where the image should be does not register an event for scripting purposes.
Browser issue: Internet Explorer 7
The standard defined for the clip property states that the list of numbers in rect(...) should be a comma-separated list. So naturally, commas cause clip to fail in IE7 when in Standards Compliance Mode, even when set inline with your HTML. Your two choices for getting around this are:
- Set
rect(...)without commas. This will not allow your CSS to validate. - Set the clipping through JavaScript on the object itself:
element.style.clip = "rect(w, x, y, z)";
I couldn't tell you why, but this works.
Feel free to play around with the clip property by modifying these input boxes, and pressing the "Clip" button.