Как грамотно обрезать изображение?

Question

[Александр]

Как обрезать кастомное изображение (вертикальное или горизонтальное) до квадрата таким образом?

Answer 1

[Mr Crabbz]

<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% - для горизонтальной версии (слева)
  // или
  /* max-width: 100% - для вертикальной версии (справа)
}

Ну или картинку делать background'ом для div'a и делать background-size: cover;

Answer 2

[metaf]

Object fit, а для IE object-fit-images

Answer 3

[xmoonlight]

D=min(height,width) - сторона квадрата
x0=(width-D)/2 //X, левый верхний угол
y0=(height-D)/2 //Y, левый верхний угол
x1=x0+D //X, правый нижний угол
y1=y0+D //Y, правый нижний угол