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?

Can you not just create real thumbs of the large images? This would be better for page loading times. — Billy Moat, Nov 22 '12 at 23:30
You could just detect the largest dimemsion and then resize accordingly. — Ohgodwhy, Nov 22 '12 at 23:33

Gurpreet Singh · Accepted Answer · 2012-11-22T23:37:53.100

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/

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

1 Answers1

Linked