LoginSignup
0
0

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-12-01

はじめに

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

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

object-fitとは?

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

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

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

プロパティ一覧 object-fit: ◯◯;

・fill

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

・contain

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

・cover

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

・none

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

・scall-down

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

参考サイト

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

まとめ

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0