用于裁剪图像的CSS / JavaScript

Question

如何使用css或javascript定位要裁剪的图像上的特定位置，没有大脚本的简单方法，

之前的图片：

我想要查看下图中突出显示的位置：

虽然没有确切的突出显示，只是试图解释它不一定是从顶部，我想选择特定的图像尺度， 如何调整大小？

Answer 1

一种方法是使用具有overflow: hidden的元素，该元素将图像作为子图像，其本身绝对位于原始元素的上下文中。结果是，overflow: hidden元素的大小会遮盖图像。

以下是该方法的一个示例：

HTML

<div id='crop-the-cats'>
    <img src='http://i.stack.imgur.com/ArS4Q.jpg'>
</div>​

CSS

#crop-the-cats {
    width: 100px;
    height: 80px;
    overflow:hidden;   
    position:relative;
}

#crop-the-cats img {
    position: absolute;
    top: -60px;
    left: -70px;
}

请参阅http://jsfiddle.net/Da9CT/

另一种方法是使用图像作为图像的背景，并使用background-position重新定位它：

HTML

<div id='crop-the-cats'></div>​

CSS

#crop-the-cats {
    width: 100px;
    height: 80px;
    background-image: url(http://i.stack.imgur.com/ArS4Q.jpg);
    background-position: -50px -60px;
}

请参阅http://jsfiddle.net/Da9CT/2/

Answer 2

您无法使用javascript / css裁剪图像，但可以将其放置在隐藏溢出的元素中：http://jsbin.com/ebenem/1/edit

如果有帮助，请告诉我！