【CSS】「object-fit」について解説。【分かりやすい。】
この記事はこのような方へ向けて書いています。
この記事で得られる知識！
- 「object-fit」で何ができるのか？
- 「object-fit」の使い方！
- 「object-fit」を使う上での注意点。
この記事を読むことで、これらの知識が得られます。
この記事でサクッと「object-fit」について学習しちゃって下さい！
「object-fit」では、何ができるのか？
置換要素に入るコンテンツをその表示領域に「どのようにはめ込むのか」の設定ができます。
水色の枠線は、表示領域です。
そこに置換要素であるimg要素を埋め込んでいます。
上の方は、画像を全て表示することができていますが、余白ができていて、
下の方は、画像は一部しか表示されていませんが、余白はなくなっています。
置換要素とは？
「object-fit」は「置換要素」をその表示領域に「どのように埋め込むか」の設定ができる訳ですが、その「置換要素」って何？？と思うかもしれないので、そちらについて説明します。
「置換要素」！
- img
- video
- iframe
「置換要素」には、上の様なものなどがあります。
※全てではありません。
ものもと別の場所にコンテンツがあって、それがCSSからは独立していて、HTMLタグの指定によって、そのタグのコンテンツとして置き換えられるような要素のことですね。
例えば、「img要素」は、「src属性」によって、そこに入るコンテンツが指定された画像へ置き換えられる形で表示されます。
「src属性」の値を変更したら、また別のコンテンツ（画像）へと置き換わります。
このようなタイプの要素を「置換要素」と呼びます。
公式定義。
「object-fit」の公式定義についてです。
「object-fit」の公式定義
- 初期値は、「fill」
- 継承は、なし
これらも知っておいてくださいね。
「object-fit」に設定できる値は５つ。
「object-fit」に設定できる値は、下記の通りです。
「object-fit」に設定できる値
- none
- contain
- cover
- fill（初期値）
- scale-down
これらの値を設定することができます。
それぞれの値を使うと、どうなるのか？
それでは先ほどお伝えした５つの値を使ってみながら、その挙動について解説したいと思います！
「none」を使うと？
「object-fit」の値に「none」を使うと、このように、「元々の画像のサイズ」のまま、領域内にはめ込まれます。
もし、サイズが大きな画像を使うと、下の様になります。
表示領域よりも大きな画像だと、上の様に、そこからはみ出る部分は切り取られて表示されます。
「contain」を使うと？
「object-fit」の値に「contain」を使うと、上の様になります。
置換するコンテンツのアスペクト比を保ったまま、表示する領域にコンテンツが収まるように、コンテンツが拡大・縮小して表示されます。
レターボックスと呼ばれる表示になります。
上の画像の様に、表示領域の中にスペースができる感じですね。
「cover」を使うと？
「object-fit」の値に「cover」を使うと、上の様になります。
表示領域内に余白ができないことが特徴ですね。
「fill」を使うと？（初期値）
「object-fit」の値に「fill」を使うと、上の様になります。
表示領域ぴったりにコンテンツが拡大・縮小されます。
なので、コンテンツのアスペクト比と表示領域のアスペクト比があってない場合は、画像のアスペクト比が変更されます。
この「fill」が初期値です！
「scale-down」を使うと？
「object-fit」の値に「scale-down」を使うと、上の様になります。
表示領域よりも、大きな画像は「contain」と同じようになります。
ですが、表示領域よりも、小さな画像は下の様になります。
このように、ですが、表示領域よりも、小さな画像の時は、「none」と同じようになります。
「img要素自体」の幅や高さが大事。なので親要素のサイズは関係ない。
<div class="box">
<img src="pengin.png" alt="ペンギンの画像。">
</div>上のようなHTMLの構造になっているとします。
この時、「img要素」の表示領域は、「img要素自体」の「width」と「height」で指定されるので、親要素の「box」クラスがついている「div要素」は関係ないです。
そこを間違わないように、してください！
「object-fit」が効かない時に考えることは？
「object-fit」が効かない！なんてことになった時に、考えるリストを用意しました。それは下記の通りです。
「object-fit」が効かない時の対処法。
- 置換要素に指定してない
- 高さと幅の設定がない
- IEを使っている
- キャッシュの問題
こららが考えられますので、当てはまってないか、確認してみてください。
「object-fit」を指定するのは、「img」要素などの置換要素
img {
object-fit: contain;
}「object-fit」の指定をするのは、「置換要素」に対してです。
親要素などに指定しないように気を付けてくさい！
高さと幅の設定がない
置換要素に対して、「width」と「height」が設定されていないと、表示領域が決まらないので、「object-fit」が上手く効きません。
なので、これにも注意してくさい。
IEを使っている
「object-fit」は比較的に新しいプロパティです。
なので、「Internet Explorer」というwebブラウザではサポートされていません。
Internet Explorer のサポートは、2022 年 6 月 15 日に終了しました。
Microsoft
このように、IEはすでにサポートがされていないブラウザなので、一般のユーザーで使っている人は多くないと思うので、あまり気にすることはないと思いますが、IEだと「object-fit」は効かないことを知っておいてください。
https://caniuse.com/?search=object-fit
「Can I Use」という、様々なwebブラウザでその技術がサポートされているかどうか調べることができるサイトで調べてみました。
すると、このように、「object-fit」がIEでは対応してないことが確認できると思います。
キャッシュの問題
「HTMLファイル」や「CSSファイル」を編集したのに、変更が更新されない時は、もしかしたらキャッシュが残っていることが原因かもしれません。
なのでキャッシュを消去してみることを試してみてください。
「Chrome」ブラウザでのキャッシュの消去方法を紹介します。
まず上の様に、「webページ上で右クリック」してみてください。
すると「検証」という欄が一番下にあると思うので、そこをクリックして開発者ツールを開いてください。
開発者ツールが開けたら、左上の更新するための「丸い矢印」の上で「右クリック」をしてみてください。
すると、でてくる「キャッシュの消去とハード再読み込み」をクリックしてください。
するとキャッシュを消去することができます。
置換要素は、インラインボックスでも、幅と高さが指定できる。
「img要素」はデフォルトで「インラインボックス」です。
ですが、「置換要素」は「幅と高さの設定」ができる、というルールがあります。
つまり、「width」と「height」を使うことができる、ということですね。
カクつかないので、「width属性」と「height属性」でサイズを指定することを推奨する。
img {
width: 600px;
height: 600px;
}CSSによって、「img要素」に対してCSSで「width」と「height」を設定すると、画像の読み込みが遅れた場合に、上の動画の様に、あとから画像が入り込むのでwebページが「カクついてしまう」というのが起こります。
<div class="box">
<img src="pengin.png" alt="サムネイル" width="600" height="600">
</div>ですが、上の様に、「width属性」と「height属性」を使ってHTMLファイルで「img要素」の幅と高さを設定してあげれば、予めスペースが作られるので、カクつかないです。
まとめ。
「object-fit」は置換要素に入るコンテンツをその表示領域に「どのようにはめ込むのか」の設定ができる。
「object-fit」に設定できる値は下記の通り。
「object-fit」に設定できる値
- none
- contain
- cover
- fill（初期値）
- scale-down
「img要素自体」の幅や高さが大事で、親要素のサイズは関係ない。
「object-fit」が効かない時の対処法。
- 置換要素に指定してない
- 高さと幅の設定がない
- IEを使っている
- キャッシュの問題
カクつかないので、「width」と「height」属性でサイズを指定することを推奨する。
置換要素は、インラインボックスでも、幅と高さが指定できる。
それではこんな感じでこの記事を終わります！
ではまた！