Как грамотно обрезать изображение?
<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;
D=min(height,width) - сторона квадрата
x0=(width-D)/2     //X, левый верхний угол
y0=(height-D)/2    //Y, левый верхний угол
x1=x0+D               //X, правый нижний угол
y1=y0+D               //Y, правый нижний угол