我有一个图片库,我希望将缩略图裁剪为 150 像素 x 150 像素。图像不是正方形 - 它们是矩形且大小不同,因此我无法将宽度和高度设置为 150px,因为图像将全部被挤压和扭曲。
我想知道除了 CSS 剪辑属性之外还有哪些其他方法可以裁剪缩略图。还有其他 CSS 解决方案或者 jQuery 脚本吗?
最佳答案
您可以使用负边距来实现此目的。 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/
关于jquery - CSS 剪辑属性 - 是否有裁剪图像的替代方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13521319/