CSS剪輯屬性 - 是否有替代裁剪圖像？

Question

我有一個圖片庫，我希望縮略圖在150px x 150px的範圍內裁剪。這些圖像不是方形的 - 它們是矩形的，尺寸各不相同，所以我無法將寬度和高度設置爲150px，因爲圖像會被壓扁和扭曲。

我想知道除CSS剪輯屬性之外，還有哪些其他方法可以剪裁縮略圖。有沒有其他的CSS解決方案或者jQuery腳本？

Answer 1

您可以使用負邊距來實現此目的。 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; 
    }​ 

這篇文章中提到的一些技巧： http://cssglobe.com/3-easy-and-fast-css-techniques-for-faux-image/