CSS/JavaScript裁剪图像

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

之前的图片：

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

虽然不是精确的突出显示，只是试图解释它不必是从最顶端，我想选择特定的图像比例，

---

裁剪后如何调整尺寸

不能使用javascript/css裁剪图像，但可以将其放置在隐藏溢出的元素中：

---

如果有帮助，请告诉我

一种方法是使用具有

溢出：隐藏
的元素，该元素将图像作为子元素，其本身绝对位于原始元素的上下文中。结果是，
overflow:hidden
元素的大小屏蔽了图像

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

HTML

​看

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

HTML

​请参见
这是一个很好的答案1++，完成此操作后如何调整图像大小？@Osa如果您指的是容器，只需更改
#裁剪猫的大小
：。如果你是指被裁剪的图像本身，只需将
width
和/或
height
规则应用于
#裁剪猫img
：您也可以定位图像，而无需使用
position:absolute
，方法是使用
margin top
和
margin left
而不是
top
和
left
。您可以通过更改图像的宽度和高度来调整图像大小container@adzaz这实际上破坏了位置不幸的是，它就是这样工作的，每次你改变宽度和高度时，你都必须调整位置。现在你可以用javascript在brwoser端裁剪图像了。是的，现在可以使用javascript裁剪图像了。结帐：
<div id='crop-the-cats'>
    <img src='http://i.stack.imgur.com/ArS4Q.jpg'>
</div>​

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

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

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

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