More than 3 years have passed since last update.

object-fitで画像をうまく調整する

Last updated at 2020-12-09Posted at 2020-12-01

はじめに

現在、質問アプリケーションの開発を個人で行っています。
こちらにまとめているのでよろしければ是非見てください。
【未経験・独学】Laravelでアプリケーションの開発からAWSを用いたデプロイまで

新しく画像を非同期で保存し、プレビューに表示させる機能を実装するにあたって
object-fitという簡単に画像を指定したサイズに調整してくれるcssプロパティを使用したので学習メモとして残します。

CSSのobject-fitプロパティは、置換要素、例えばimgタグやvideoタグなどの中身を、コンテナーにどのようにはめ込むかを設定します。
参考:object-fit MDN web docs

※置換要素とは、コンテンツが現在の文書のスタイルに影響されない要素のこと。一般的な置換要素は、iframeタグ・videoタグ・embedタグ・imgタグなど。
参考：置換要素 MDN web docs

object-fitで画像を指定のサイズに切り取ったり、縦横比を維持しながらリサイズしたりと様々な設定ができる。

初期値。要素に合わせるため縦横比は維持されない（画像が伸びたり縮んだりしてしまう）。

###・contain
画像の縦横比は維持されつつ、指定の画像領域に収まるよう大きさが調整される。

###・cover
要素に余白がでないようにしつつ、縦横比は維持し要素からはみ出ている部分はトリミングする。

###・none
画像のリサイズはされず、画像オリジナルのサイズのまま表示される。

###・scall-down
要素より画像が大きい場合は、「contain」を、小さい場合は「none」を指定する。
つまり画像が大きい場合は縦横比を維持しつつ、要素内に収まるよう調整され、小さい場合は画像オリジナルのサイズで表示される。

こちらのサイトに、object-fitのそれぞれの使用イメージが記載されていてとてもわかりやすいです。
object-fit CODE KITCHEN

今回は、object-fitというCSSプロパティについてまとめました。
CSSについては、まだまだ便利なものが沢山あるので使いながらどんなものがあるか知っていきたいと思います。