• tips

CSSだけで画像のトリミングができる、便利なobject-fit

最終更新日:2018/09/11

たったの一行追加するだけで、簡単にcssだけでトリミングができてしまうobject-fitプロパティをご紹介します。

 

cssのトリミングをしたい要素にobject-fitプロパティを追加

例えば、以下のような横長の画像を、正方形にいい感じにはめ込みたい場合の設定。

See the Pen object-fit by maikatou (@logequal) on CodePen.0

 

cssのトリミングをしたい要素に以下の一文を追加します。

</>css

.tropical-fish-fit img{
  object-fit:cover;
}

object-fitの設定

実際に設定したものはこちらです。

See the Pen object-fit:cover by maikatou (@logequal) on CodePen.0

 

左はobject-fitプロパティを使用せず、通常のパターンで、 右の画像はobject-fitプロパティを使用したバージョンです。

パッと見は、左の画像でも問題なさそうですが、無理やり正方形にはめ込まれていませんか? サイドの背景がギュッと寄っています。 それに対して右の画像は真ん中の熱帯魚が綺麗にハマっています。

最後に

レスポンシブサイトを制作する際、なるべく容量を軽くするために、PC・スマホ共通の画像を使用することがあります。しかし、PCとスマホでは、アスペクト比の違いから、共通した画像を使用するには厳しい場合があります。 そんな時に便利なobject-fitプロパティのご紹介でした。