jquery - CSS クリップ プロパティ - 画像をトリミングするための代替手段はありますか?

Question

画像ギャラリーがあり、サムネイルを 150px x 150px でトリミングしたいと考えています。画像は正方形ではありません。長方形でサイズがすべて異なるため、幅と高さを 150px に設定することはできません。画像がすべて押しつぶされて歪むためです。

CSS クリップ プロパティ以外に、サムネイルのトリミングを行う方法が他にあると思います。他の CSS ソリューションや jQuery スクリプトはありますか?

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/