15

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 ?

Osa
  • 1,922
  • 7
  • 30
  • 51
  • You can resize it by changing width and height of the container – Adaz Oct 08 '12 at 21:45
  • @adzaz that actually ruins the position – Osa Oct 08 '12 at 21:49
  • 1
    Unfortunately that's how it works, every time you change the width and height, you'll have to adjust the position. – Adaz Oct 08 '12 at 21:52
  • You can crop images in the brwoser side with javascript, now. Checkout http://stackoverflow.com/questions/12728188/cropping-images-in-the-browser-before-the-upload – sçuçu Mar 29 '17 at 13:57

2 Answers2

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.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/

Josh Davenport-Smith
  • 5,456
  • 2
  • 29
  • 40
  • well thats a great answer 1++, How can i resize the image size after doing this ? – Osa Oct 08 '12 at 21:45
  • @Osa If you mean the container, just change the size of `#crop-the-cats`: http://jsfiddle.net/Da9CT/4/. If you mean the cropped image itself, simply apply `width` and/or `height` rules to `#crop-the-cats img`: http://jsfiddle.net/Da9CT/3/ – Josh Davenport-Smith Oct 08 '12 at 21:49
  • You can also position the image without using `position: absolute` by using `margin-top` and `margin-left` instead of `top` and `left`. – Sara May 09 '13 at 22:21
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!

Adaz
  • 1,627
  • 12
  • 14
  • 1
    Yes you can crop image using javascript, now. Checkout: http://stackoverflow.com/questions/12728188/cropping-images-in-the-browser-before-the-upload – sçuçu Mar 29 '17 at 13:56