HTML CSS

HOW TO CROP IMAGES IN HTML CSS

(a quick guide)

.crop {   SET DESIRED DIMENSIONS   width: 300px; height: 300px;

BACKGROUND IMAGE

01

<div class="crop"></div>

  SET BACKGROUND IMAGE   background-image: url("IMG.JPG");   background-repeat: no-repeat;   background-position: center;  }

SET DESIRED DIMENSIONS .crop {   width: 300px; height: 300px;   position: relative;  }

<div class="crop">   <img src="IMG.JPG"> </div>

CSS CLIP IMAGE

02

CLIP - RECT(TOP, RIGHT, BOTTOM, LEFT) .crop img {   clip: rect(0, 300px, 300px, 0);   position: absolute; top: 0; left: 0;  }

CLIP CIRCLE .cropA { clip-path: circle(30%); } CLIP TRIANGLE .cropB { clip-path: polygon(50% 0, 0 100%, 100% 100%); } CLIP DIAMOND .cropC { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }

CSS CLIP PATH

03

<img src="IMG.JPG" class="cropA"> <img src="IMG.JPG" class="cropB"> <img src="IMG.JPG" class="cropC">