★CSS3リファレンス
object-fit …… 画像などをボックスにどのようにはめ込むかを指定する
広告
object-fitプロパティは、置換要素（img要素やvideo要素など）をボックスにどのようにはめ込むかを指定する際に使用します。
画像のトリミング表示に使用されることの多いプロパティですが、 画像のトリミング表示では object-fit: cover か object-fit: none が使用されることが多いでしょう。
■値
- fill
- 置換要素（img要素やvideo要素など）をボックスサイズに合わせて縦横比を維持しないでリサイズして、全体が見えるようにはめ込む（初期値）
- contain
- 置換要素（img要素やvideo要素など）をボックスサイズに合わせて縦横比を維持しながらリサイズして、全体が見えるようにはめ込む
- cover
- 置換要素（img要素やvideo要素など）をボックスサイズに合わせて縦横比を維持しながらリサイズして、トリミングしてはめ込む
- none
- 置換要素（img要素やvideo要素など）をリサイズしないで、ボックスサイズでトリミングしてはめ込む
- scale-down
- 置換要素（img要素やvideo要素など）のサイズとボックスサイズの小さい方に合わせて、縦横比を維持しながらリサイズして、全体が見えるようにはめ込む。 言い換えれば、指定するボックスサイズと置換要素の実寸サイズの大小関係に応じて contain または none を指定したときと同じ表示となる
W3Cのページに掲載されている以下の図が分かりやすいでしょう。
■初期値・適用対象・値の継承
- 初期値
- fill
- 適用対象
- 置換要素（img要素やvideo要素など）
- 値の継承
- しない
使用例として、横300×縦400ピクセルの画像を、横200×縦200ピクセルのボックスにはめ込んでトリミングしてみます。
■使用例
CSSソースは外部ファイル（sample.css）に記述
img.sample1 {width: 200px; height: 200px;
object-fit: fill;
}
img.sample2 {
width: 200px; height: 200px;
object-fit: contain;
}
img.sample3 {
width: 200px; height: 200px;
object-fit: cover;
}
img.sample4 {
width: 200px; height: 200px;
object-fit: none;
}
img.sample5 {
width: 200px; height: 200px;
object-fit: scale-down;
}
HTMLソース
<p>使用する横300×縦400ピクセルの画像<br>
<img src="images/neko.jpg">
</p>
<p>
object-fit: fill を指定<br>
<img class="sample1" src="images/neko.jpg">
</p>
<p>
object-fit: contain を指定<br>
<img class="sample2" src="images/neko.jpg">
</p>
<p>
object-fit: cover を指定<br>
<img class="sample3" src="images/neko.jpg">
</p>
<p>
object-fit: none を指定<br>
<img class="sample4" src="images/neko.jpg">
</p>
<p>
object-fit: scale-down を指定<br>
<img class="sample5" src="images/neko.jpg">
</p>
↓↓↓
ブラウザ上の表示
使用する横300×縦400ピクセルの画像
object-fit: fill を指定
object-fit: contain を指定
object-fit: cover を指定
object-fit: none を指定
object-fit: scale-down を指定
■関連項目
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる！【A8.net】
© HTMQ