object-fitで画像のトリミングができる【CSS】

object-fitプロパティは、画像などの要素をボックスにフィットさせたり、トリミングすることができるプロパティです。

{object-fit: 表示方法;}

このプロパティを適用できるのは、img要素、iframe要素などです。

この画像はレスポンシブに対応させているので、デバイスの画面幅によっては幅と高さが変わりますが、元々は幅1000px、高さ700pxの画像です。

この画像を幅と高さがそれぞれ250pxのボックスで表示させるときに、object-fitプロパティの値によって、どのように表示のされ方が変わるのか比較していきたいと思います。

object-fitの値の指定方法

object-fitプロパティでは、以下のような値を指定できます。

fillを指定すると、ボックスを完全に埋めるように、要素の縦横比がリサイズされます。

containを指定すると、要素の縦横比を保ったまま、ボックスに要素全体が収まるようにリサイズされます。

要素の幅と高さのうち大きい方のサイズに合わせてボックスにフィットさせます。

coverを指定すると、要素の縦横比を保ったまま、ボックスを完全に埋めるようにリサイズされます。

要素の幅と高さのうち、小さい方がボックスにフィットするようにリサイズされ、大きい方でボックスからはみ出した分はトリミングされます。

noneを指定すると、サイズは調整されず、そのまま表示されます。

scale-downを指定すると、noneまたはcontainを指定した場合のうち、要素が小さい方に合わせて表示されます。

※object-fitプロパティは、指定する画像の幅と高さも指定していないと効かないので注意