如何使用css或
javascript来定位要裁剪的图像上的特定位置,没有大脚本的简单方法,
前图：
我想要查看以下图像中突出显示的位置：
不是确切突出显示,只是试图解释它不必是从顶部,我想选择特定的图像尺度,
裁剪后如何调整？
解决方法
一种方法是使用一个具有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;
}
另一种方法是使用图像作为图像的背景,并使用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;
}
