用于裁剪图像的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

让我知道是否有帮助！