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 :
enter image description here

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

enter image description here

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 ?

You can resize it by changing width and height of the container — Adaz
– Adaz, Commented Oct 8, 2012 at 21:45
Unfortunately that's how it works, every time you change the width and height, you'll have to adjust the position. — Adaz
– Adaz, Commented Oct 8, 2012 at 21:52
You can crop images in the brwoser side with javascript, now. Checkout stackoverflow.com/questions/12728188/… — sçuçu
– sçuçu, Commented Mar 29, 2017 at 13:57

Josh Davenport-Smith · Accepted Answer · 2022-05-27 13:46:32Z

19

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.sstatic.net/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.sstatic.net/ArS4Q.jpg);
    background-position: -50px -60px;
}

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

edited May 27, 2022 at 13:46

answered Oct 8, 2012 at 21:41

Josh Davenport-Smith

5,5112 gold badges31 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Osa Over a year ago

well thats a great answer 1++, How can i resize the image size after doing this ?

Josh Davenport-Smith Over a year ago

@Osa If you mean the container, just change the size of #crop-the-cats: jsfiddle.net/Da9CT/4. If you mean the cropped image itself, simply apply width and/or height rules to #crop-the-cats img: jsfiddle.net/Da9CT/3

Sara Over a year ago

You can also position the image without using position: absolute by using margin-top and margin-left instead of top and left.

Adaz · Accepted Answer · 2012-10-08 21:41:12Z

5

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!

answered Oct 8, 2012 at 21:41

Adaz

1,66512 silver badges14 bronze badges

1 Comment

sçuçu Over a year ago

Yes you can crop image using javascript, now. Checkout: stackoverflow.com/questions/12728188/…

Collectives™ on Stack Overflow

CSS/JavaScript to crop image

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related