object-fit

サムネイルはobject-fit が便利

IE11、iOS9以外のモダンブラウザは対応しているので、 IE11のハックをいれておけば、いいかなと。

画像の上部分を表示させたいので、 object-position: center top; も指定しています。

  figure{
    width: 200px;
    height: 100px;
    overflow: hidden;
    img{
      width: 200px;
      height: 100px;
      object-fit: cover;
      object-position: center top;
    }
  }

ie11など、object-fit が効かない場合は画像の親要素に背景画像として描画させる

  $(".no-object-fit .img-object-fit").each(function() {
    var imgsrc=$(this).find('img').data('src');    
    $(this).css("background-image","url("+ imgsrc +")");
  });

  .no-object-fit .img-object-fit {
    background-size: cover;
    background-position: center top;
    > img{
      opacity: 0;
    }
  }