CSS剪辑属性 - 有剪裁图像的替代方法吗？ [英] CSS clip property - is there an alternative for cropping images?

问题描述

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

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.

我想知道除了CSS剪辑属性之外，还有什么其他方法可以裁剪缩略图。有没有其他CSS解决方案或者可能是jQuery脚本？

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?

推荐答案

您可以使用负边距来实现。
DEMO

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;
    }​

本文提到了一些技巧：
http://cssglobe.com/3-easy-and-fast -css-techniques-for-faux-image /

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

这篇关于CSS剪辑属性 - 有剪裁图像的替代方法吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！