CSS clip property - is there an alternative for cropping images?

Question

I have an image gallery and I want the thumbnails to be cropped at 150px x 150px. The images aren't square - they are rectangular and all different sizes, so I can't set the width and height to 150px because the images will be all squashed and distorted.

I'm wondering what other methods there are to do cropping for thumbnails apart from the CSS clip property. Are there any other CSS solutions or perhaps jQuery scripts?

Answer 1

You can use negative margins to achieve this. DEMO

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

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

This article mentions some of the techniques: http://cssglobe.com/3-easy-and-fast-css-techniques-for-faux-image/