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;
}
}