How to crop image?

How to crop a custom image (vertical or horizontal) to the square that way?
671f40f81a0a41209f4d6ab21ab59cf0.jpg
July 9th 19 at 10:49
3 answers
July 9th 19 at 10:51
<div class="crop">
<img>
</div>


.crop {
 position: relative;
 width: 100px;
 height: 100px;
 overflow: hidden;
 display: inline-block;
}

.crop img {
 position: absolute;
 left: 50%;
 top: 50%;
 min-height: 100%;
 min-width: 100%;
 height: auto;
 width: auto;
 transform: translate(-50%, -50%);
 /* max-height: 100% horizontal version (left)
 // or
 /* max-width: 100% vertical version (right)
}


Well, or the picture to do background'ohms for a div'and do background-size: cover;
July 9th 19 at 10:53
July 9th 19 at 10:55
D=min(height,width) - square side
x0=(width-D)/2 //X upper left corner
y0=(height-D)/2 //Y-upper left corner
x1=x0+D //X, bottom right corner
y1=y0+D //Y, bottom right corner

Find more questions by tags CSSHTML