- 1. 概要
- 2. コンテナ
- 3. object-fit
- 4. やってみる
- 5. cover
- 6. 参考サイト
1. 概要
「object-fit」ってぇのを指定すると、コンテナからはみ出たりするものを、うまいこと調整してくれるそうな。
現時点（2022年10月19日）は、「コンテナとは、なんじゃらほい？」で、あったりしますが・・・。
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: 2px lime solid;
text-align: center;
width: 400px;
height: 300px;
}
.gallery-list img
{
width: 100%;
height: 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>
てな、書き方をしてみました。
アスペクト比「16:9」の大きな画像を アスペクト比「4:3」の小さな枠の中にはめ込むわけです。
「contain」だと、縦横比を保持したまま、すっぽり収まります。
「cover」は、縦横比を保持したまま、すっぽり収まるように表示するのですが。
この場合、上と左右のはみ出た部分をカットしています。
「fill」だと枠のアスペクト比で、画像全体を表示します。
歪んでしまうので、これはあまり使いたくないな。
「none」だと、縦横比を保持したまま、収まる部分のみを表示します。
「scale-down」は、この場合「contain」を採用したようです。
5. cover
「cover」のうまい使い方は、こんな感じかな。
全体で、このような画像があります。
これでも、縮小しているのですが、それでもでかいですね。
これ、実際は、中央あたりにある、「電話」ってとこをくっきりと見せたい場合。
<img src="/パス/画像ファイル名.png" ...>
と書いて画像を張り付けている箇所を下記のように書き換えると。
<img style="width: 360px; height: 390px; object-fit: cover;"src="/パス/画像ファイル名.png" ...>
こんな風に表示されます。
同じ表示サイズを保ったまま、はみでたものをカットしてくれています。
実際に、本ページのソースを見れば、そのとおりに書いてあることが確認できるかと思います。
6. 参考サイト
本ページは、下記のサイトを参考にさせていただきました。
「object-fit - CSS: カスケーディングスタイルシート | MDN」
「【CSS object-fit の使い方】CSS で画像トリミングする方法」
「【CSS】object-fit は CSS だけで画像をコンテナーにフィットさせてトリミングもできる...」
「[HTML/CSS] .container(コンテナ)の役目について整理」
「1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー」
|
