CSS/JavaScript to crop image

Question

How to target a specific location on the image to be cropped using css or javascript, simple way without big scripts,

Picture before :

I want the highlighted location on the following image to be viewed :

Not the exact highlighted though, just trying to explain it doesnt has to be from the very top, i want to select specific image scales, AND how to resize is after cropping ?

Answer 1

One approach is to use an element with overflow: hidden that has the image as a child, which itself is absolutely positioned within the context of the original element. The result being, the size of the overflow: hidden element masks the image.

Here's an example of the approach:

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;
}

​See http://jsfiddle.net/Da9CT/

Another approach is to use the image as the background of the image and reposition it using 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;
}

​See http://jsfiddle.net/Da9CT/2/

Answer 2

You can't crop image using javascript / css but you can position it inside an element with overflow hidden: http://jsbin.com/ebenem/1/edit

Let me know if that helps!