CSS / JavaScript来裁剪图像

前端之家收集整理的这篇文章主要介绍了CSS / JavaScript来裁剪图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何使用css或 javascript来定位要裁剪的图像上的特定位置,没有大脚本的简单方法,

前图:

我想要查看以下图像中突出显示的位置:

不是确切突出显示,只是试图解释它不必是从顶部,我想选择特定的图像尺度,
裁剪后如何调整?

解决方法

@H_502_12@ 一种方法是使用一个具有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/

猜你在找的CSS相关文章