<img class="img" src="http://satyr.io/300x300?text=IMG (original)" width="300" height="300" alt="Image…">

<img class="img img--cut" src="http://satyr.io/300x300?text=IMG (cropped)" width="300" height="200" alt="Image…">
 
.img--cut {    
  object-fit: cover; 
  object-position: bottom;
}

/* etc: */

body {
  display: flex;
  flex-wrap: wrap;
}

.img {
  padding: 10px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.