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
– mariobros, Commented Jan 19, 2017 at 13:48

Just a student · Accepted Answer · 2017-01-19 16:10:39Z

4

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>

edited Jan 19, 2017 at 16:10

answered Jan 19, 2017 at 13:51

Just a student

11.1k2 gold badges45 silver badges71 bronze badges

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

3 Comments

Prithviraj Mitra Over a year ago

Thanks for this concept.. Actually I have few images stacked one below another so it's bit difficult to use negative margin.

Just a student Over a year ago

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.

Prithviraj Mitra Over a year ago

Brilliant. Thanks a lot for your help.

Collectives™ on Stack Overflow

Crop image using css

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related