CSS/JavaScript 裁剪图像

Question

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

上图：

我希望查看下图中突出显示的位置：

虽然不是确切的突出显示，只是试图解释它不必从最顶部开始，我想选择特定的图像比例， 裁剪后如何调整大小？

Answer 1

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

如果有帮助，请告诉我！

Answer 2

一种方法是使用带有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/