CSSの背景で指定する

backgroun-size:cover;

と同じような感じで画像を枠内いっぱいまでの表示にする方法をメモ。

HTML

<div><img src="sample.jpg" alt=""></div>

CSS

div{
    height: 150px;
    overflow: hidden;
    position: relative;
    width: 150px;
}
div > img {
    left: 50%;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

でOK。
上記の場合だと150px×150pxのボックス内全体に画像が収まる形になります。

アイキャッチ画像等を動的に読み込むときなどにサイズを揃えられるので
見た目がガタガタにならず便利です。