Technique I picked up recently for "cropping" images that are just slightly too big on a page. All you need to do this is some basic knowledge of HTML and CSS.

---

First, set up your image on the page in a div with a nice class or id for cropping.

Code:

Select All

 

<div class="fakecrop">
    <img src="http://myhost.com/myimg.jpg" alt="my image"/>
</div>

<div class="fakecrop"> {BR} <img src="http://myhost.com/myimg.jpg" alt="my image"/> {BR}</div>

 

Now, the fun part. We'll use CSS to make the image look like it's cropped.

Code:

Select All

 

.fakecrop {
    width: 200px;
    height: 200px;
    overflow: hidden;
}

.fakecrop { {BR} width: 200px; {BR} height: 200px; {BR} overflow: hidden; {BR}}

 

The width and height will set up the size of your cropping box, and then the overflow line makes everything outside the box disappear.

Of course, right now, the box only crops from the upper-left corner of your image, which might not be what you want. To fix that, we need a little more CSS.

Code:

Select All

 

.fakecrop > img {
    margin-top: -20px;
    margin-left: -100px;
}

.fakecrop > img { {BR} margin-top: -20px; {BR} margin-left: -100px; {BR}}

 

This moves the top of the image 20 pixels behind the top of the div, and 100 pixels behind the left edge.

Hope you learned something from this tutorial.