img要素やvideo要素などのサイズ調整を1行でこなせるobject-fitは、IE非対応のためこれまであまり使われてきませんでした。
しかし、2022年6月にIEのサポートが終了になるため、これから主流のサイズ調整法になるのではないでしょうか。
ここではそんなobject-fitの設定方法や各プロパティの特徴を紹介していきます。
コンテンツ要素そのものにサイズを指定して、用途に合わせてobject-fitを設定しますが、ここで注意するべき点は縦横のサイズを必ず指定するという点です。いずれかにautoが入っているとうまくスタイルが当たりませんので注意しましょう。
コンテンツの要素を何らかの要素で囲んでサイズ指定するときは、特に意図がない場合はコンテンツの要素にwidth: 100%;とheight: 100%;を指定しましょう。
<p id="img-cover" class="img-container ">
<img
src="http://oscarblog.net/wp-content/uploads/2021/10/sample-objectfit.jpg"
alt=""
/>
</p>
<style>
.img-container {
width: 200px;
height: 180px;
overflow: hidden;
}
#img-cover >img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>そしてobject-fitを設定すると、object-position: 50% 50%;がデフォルトで設定されているので、コンテンツの位置は中心に設定されます。
もとのコンテンツと表示するコンテナのアスペクト比が違う場合は、コンテナのアスペクト比に合うようにトリミングして、コンテナいっぱいにコンテンツを表示します。
object-fit: cover;
background-size: cover;と同じように振る舞うので非常に使いやすいプロパティです。
もとのコンテンツと表示するコンテナのアスペクト比が違う場合、コンテナにコンテンツがすべて収まるようにサイズ調整をします。このとき、長さが余る部分には余白が入ります。
object-fit: contain;
ロゴなど「画像の全体を見切れることなく表示したい」というときに使えるプロパティです。
もとのコンテンツと表示するコンテナのアスペクト比が違う場合、コンテナにコンテンツがすべていっぱいに収まるように縦横別にサイズ調整を行います。
このため、アスペクト比が違うコンテンツは引き伸ばされて歪んでしまいます。
object-fit: fill;
width: 100%;とheight: 100%;を指定したときと同じ挙動ですね。
コンテナのサイズに関わらず、もとのコンテンツのサイズを維持します。この際、はみ出した部分はトリミングされ、余った部分は余白が入ります。
object-fit: none;
こちらはwidth: auto;とheight: auto;を指定したときと同じ挙動です。
もとのコンテンツがコンテナよりも大きいときはcontainと同じように振る舞います。
そしてコンテナがもとのコンテンツよりも大きくなったときにはnoneと同じように振る舞います。
object-fit: scale-down;
コンテナがもとのコンテンツよりも大きくなったときに拡大してでも追随しないところがcontainと違うところです。
object-fitの使い方についてまとめてみました。位置の調整をすることなく中心に設置されて、縦横のサイズ調整を自動で行ってくれるので今後コンテンツ設置の主流になるのではないでしょうか。
ではまた。
