【CSS】object-fitプロパティの使い方について
このまま学習を続けて、本当に実務で通用するのか不安な方へ。
そんな方に向けて、実務で “通用する人としない人の違い” をまとめた無料メール講座を用意しました。
さらに、特典PDFとして、『コーディング中級者が案件獲得前にやるべきこと8選』をプレゼント中です。
画像の表示を制御するobject-fitプロパティの使い方について解説していきます。
object-fitプロパティは、画像をトリミングする際などに便利なプロパティです。
今回は、実務でもよく使用する「contain」と「cover」について詳しく解説していきます。
目次
1. object-fitとは？
object-fitとは、画像が表示領域に対してどのようにフィットするのかを決めるためのプロパティです。
object-fitプロパティの値には下記の5種類があります。
| fill | 初期値です。ボックスのサイズに合わせて画像を引き伸ばします。画像の縦横比は維持されません。 |
|---|---|
| contain | 画像がボックス内に収まるように拡大、縮小しますが、縦横比は維持します。ボックスのサイズに合わせて画像のサイズが調整され、余白ができる場合があります。（containの表示を確認） |
| cover | 画像がボックス全体を覆うように拡大、縮小します。縦横比は維持されますが、ボックスのサイズに合わせて画像がトリミングされることがあります。（coverの表示を確認） |
| none | 画像は元のサイズのまま表示され、縦横比も維持されます。 |
| scale-down | contain と none の動作を比較し、どちらか小さいサイズで表示します。画像の縦横比は維持されます。 |
今回は、上記の中でも特によく使用する「contain」と「cover」の表示について確認していきます。
2. contain
object-fitプロパティに「contain」を指定した場合、画像の表示は下記の通りとなります。
■元の画像
■「object-fit: contain」を指定した場合
縦横比を維持したままボックスに収まるように縮小されます。
3. cover
object-fitプロパティに「cover」を指定した場合、画像の表示は下記の通りとなります。
■元の画像
■「object-fit: cover」を指定した場合
縦横比を維持したままボックスからはみ出た部分はトリミングされて表示されます。
（左右のはみ出た部分がトリミングされています。）
「contain」は、ボックスサイズいっぱいに画像を表示したい場合などに使用します。
4. 表示位置の指定
「object-fit」は、「object-position」プロパティとセットで使用することで、表示位置を指定することができます。
表示位置の指定は、主に%、数値（px）、キーワード（top、bottom、left、right、center）で指定することができます。
例えば、「object-fit:cover」と「object-position:left」を指定した場合は、以下のように左寄せでトリミングされます。
■「object-fit:cover」と「object-position:left」を指定した場合
画像は左寄せで配置され、ボックスからはみ出た右側の部分はトリミングされます。
5. まとめ
object-fitプロパティについて解説してきました。
object-fitプロパティは、画像をボックス内にどのように表示するかを決めるためのプロパティです。
画像の縦横比を維持したままボックスに収める「contain」や、画像をトリミングしてボックスいっぱいに表示する「cover」は実務でもよく使用しますので、使いこなせるようにしておきましょう！
あなたのコーディング力、実務で通用しますか？
以下のようなお悩みに1つでも当てはまる場合、無料のメール講座をお受け取りください。
- 模写はできるようになってきたけど、実務に通用するか不安
- ポートフォリオに悩んでいる・載せる実績がない
- 案件に挑戦したいけど、自信がなくて一歩踏み出せない
今登録すると、特典PDFとして、『コーディング中級者が案件獲得前にやるべきこと8選』をプレゼント中です。
コーディングを仕事にしていきたい方へ
Codejump Proでは、実際の案件をモデルにした仮想案件で実務レベルのスキルと経験を身につけていきます。
- ポートフォリオに載せる実績がない・・・
- 実務経験がゼロ・・・
- 案件獲得に不安がある・・・
1つでも当てはまる場合は、今すぐ実務レベルの案件をスタートしてみてください。
現場レベルのスキルを身につけたい方へ
現場レベルのコーディングスキルを身につけたい方は、書籍『HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門』（出版社：技術評論社）がおすすめです。
本書は、入門編から実践編の6つのWebサイト制作を通して、現場で必要なコーディングスキルをステップアップしながら1冊で身につけていきます。
- 第1章【入門編】プロフィールサイト〜フレックスボックス
- 第2章【初級編】ブランドサイト〜ポジション
- 第3章【中級編】サービスサイト〜複数ページ
- 第4章【上級編】カフェサイト〜複数レイアウト
- 第5章【応用編】ランディングページ〜動きのあるWebサイト
- 第6章【実践編】コーポレートサイト〜実務を想定したWebサイト制作
現場レベルのコーディングスキルを身につけたい方は、こちらの書籍を一通り学習した後、Codejumpの練習課題に取り組むと効率良く学習できます。
