画像を指定サイズで切り取り表示をするcss

インデックスなどでサムネイル画像を表示することがよくありますが、width、height表示では縦横比が崩れてしまいます。以前はoverflowなどを使っていましたが、より手早くできるようになりました。

object-fit：どのように対象にフィットさせるか

img {
width: 250px;
height: 250px;
object-fit: cover; /* この一行を追加するだけ！ */
}

object-fitはimgやvideoを要素、表示したいサイズをコンテナという考え方にして、どのように表示するかを指定できるcssプロパティです。

サイズを指定して切り取りをしてくれるので使い勝手のいいのがobject-fit: cover;です。ほかの動きとして、縦横比を無視して引き延ばすfill、画像自体を拡大や縮小するcontainなどがあります。