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.
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>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments