CSS - 画像関連 - object-fit コンテナへのはめ込み
- 1. 概要
- 2. コンテナ
- 3. object-fit
- 4. やってみる
- 5. cover
1. 概要
「object-fit」ってぇのを指定すると、コンテナからはみ出たりするものを、うまいこと調整してくれるそうな。
現時点（2022年10月19日）は、「コンテナとは、なんじゃらほい？」で、あったりしますが・・・。
本ページは、下記のサイトを参考にさせていただきました。
「object-fit - CSS: カスケーディングスタイルシート | MDN」
「【CSS object-fit の使い方】CSS で画像トリミングする方法」
「【CSS】object-fit は CSS だけで画像をコンテナーにフィットさせてトリミングもできるとっても素晴らしいプロパティー」
「[HTML/CSS] .container(コンテナ)の役目について整理」
「1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー」
2. コンテナ
でまぁ、コンテナについて泥縄式に調べておるのですが。
まだ、ようわかっとらんのです。
3. object-fit
参考サイト、丸写しですが。
| 値 | 作用 |
|---|
| contain | アスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小 |
| cover | アスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように拡大縮小 |
| fill | 要素のコンテンツボックス全体を埋めるサイズ |
| none | コンテンツは、拡大縮小されない |
| scale-down | コンテンツは none または contain を指定したかのようにサイズが決められ、オブジェクトの実際のサイズが小さいほうを採用 |
4. やってみる
この画像（サイズは、1366x768）で実験してみます。
下記の定義をして
div.frame
{
width: 100%;
text-align: center;
}
.gallery-list
{
margin: auto;
border: 1px red solid;
text-align: center;
width: 300px;
height: 100%;
}
.gallery-list img
{
width: 100%;
}
<div class="frame">
contain
<div class="gallery-list"><img style="object-fit: contain;" src="/img/FreeBSD/html/01/06/03/01.png" alt="さんぷる"></div>
・・・ 略 ・・・
</div>
てな、書き方をしてみたのですが・・・。
contain
cover
fill
none
scale-down
5. cover
「cover」の使い方がが、やっとおぼろげに理解できたような気がします（2024年4月19日）。
全体で、このような画像があります。
これでも、縮小しているのですが、それでもでかいですね。
これ、実際は、中央あたりにある、「電話」ってとこをくっきりと見せたかった。
で。
<img src="/パス/画像ファイル名.png" ...>
と書いて画像を張り付けている箇所を下記のように書き換えると。
<img style="width: 360px; height: 390px; object-fit: cover;"src="/パス/画像ファイル名.png" ...>
こんな風に表示されます。
同じ表示サイズを保ったまま、はみでたものをカットしてくれています。
実際に、本ページのソースを見れば、そのとおりに書いてあることが確認できるかと思います。
|
|
