CSS 剪辑属性 - 是否有裁剪图像的替代方法？答案

【问题标题】：CSS clip property - is there an alternative for cropping images?CSS 剪辑属性 - 是否有裁剪图像的替代方法？
【发布时间】：2012-11-11 08:38:55
【问题描述】：

我有一个图片库，我希望将缩略图裁剪为 150 像素 x 150 像素。图片不是正方形的——它们是矩形的，大小不一，所以我不能将宽度和高度设置为 150 像素，因为这些图片都会被压扁和扭曲。

我想知道除了 CSS 剪辑属性之外，还有哪些其他方法可以对缩略图进行裁剪。还有其他 CSS 解决方案或 jQuery 脚本吗？

【问题讨论】：

你不能只为大图像创建真正的拇指吗？这对于页面加载时间会更好。
您可以只检测最大的尺寸，然后相应地调整大小。

标签： jquery css gallery thumbnails crop

【解决方案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/

【讨论】：