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

Update 2022-05-27: A new property object-view-box will soon make this a lot simpler: https://ishadeed.com/article/css-object-view-box/

---

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='https://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(https://i.stack.imgur.com/ArS4Q.jpg);
    background-position: -50px -60px;
}

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