如何使用CSS / JS在Web上裁剪图像

时间:2012-03-11 16:40:02

标签: javascript css web

有一些不同尺寸的图像,我想用它们制作一些缩略图。如果我使用溢出:隐藏输出图像将是原始图像的左上角,而我希望它是图像的确切中心,就像我想要的像素一样.Been一会儿搜索这个,但没有真正的有用......

2 个答案:

答案 0 :(得分:3)

您可以使用img作为背景,而不是使用div,并使用CSS background-position属性将其居中。或者您可以使用img divoverflow: hidden使用{{1}}并使用图片上的边距将其居中。

但是,仅供参考,缩略图应该在服务器端生成,否则你无论如何都要发送整个图像。

答案 1 :(得分:0)

那么,你的缩略图只是整个图像的一小部分吗?为什么不在服务器中调整图像大小并将其显示在具有预定义大小的图像标记内?如果图像不是很大,您可以跳过服务器端调整大小,只需执行以下操作:<img src="image.jpg" alt="Some image" height="42" width="42" />。只需将图像大小更改为您喜欢的任何内容即可。