Crop image using css

Question

I am trying to crop 50px from the top of an image. I am following the below reference but for some reason it didn't work in FF but worked in Chrome.

https://css-tricks.com/clipping-masking-css/

Html:

<img src="https://s30.postimg.org/lkqxmrk29/about.jpg" class="rectshape">

Demo:https://jsfiddle.net/squidraj/a4j343hg/1/

Any help is highly appreciated.

This works good for me! Maybe you are using browser that not support clip property? — mariobros, Jan 19 '17 at 13:48
Maybe this will be helpful for you: http://stackoverflow.com/questions/33816793/clip-path-doesnt-work-in-firefox-values — mariobros, Jan 19 '17 at 13:51

Just a student · Accepted Answer · 2017-01-19T16:10:39.937

Since the clip path is not supported very well, why not use overflow: hidden and a container element? Here is your updated JSFiddle demonstrating this. A negative margin can be used to hide part of the image. Cropping the image from other sides can be accomplished easily by using negative margin on the other sides. Only if you want a non-rectangular clipping path, you will have to resort to the SVG clipPath that was referred to in the comments. Example Fiddle.

.rectshape {
  overflow: hidden;
  margin: 5px;
  border: 1px solid #000;
}

.rectshape > img {
  margin-top: -50px;
  border: 1px solid #00f;
}

<div class="rectshape">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">
</div>
<div class="rectshape">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">
</div>
<div class="rectshape">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">
</div>

Thanks for this concept.. Actually I have few images stacked one below another so it's bit difficult to use negative margin. — Prithviraj Mitra, Jan 19 '17 at 14:49
The negative margin is only applied to the image, it does not extend to the container. I will update my answer to include stacked images. — Just a student, Jan 19 '17 at 16:04

Crop image using css

1 Answers1