javascript - 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

让我知道这是否有帮助！