object-fitプロパティの説明
CSSのobject-fitプロパティは、画像や動画などの置換要素をボックスに収める方法を指定します。要素は配置されると四角形のボックスを作成しますが、その中に埋め込まれるコンテンツのはめ込み方式を変更できます。
例えば、CSSで定義したコンテナの寸法と画像のサイズが異なる場合に、アスペクト比を維持したまま縮小して配置するのか、それを崩してでもコンテナにフィットさせるのかを選択できます。また、幅と高さのあふれる方の辺をトリミングしてレイアウトを優先させることもできます。
ボックスの中に配置されるオブジェクトの位置を調整する場合は、object-positionを使用します。
object-fitに指定できる値
fill- オブジェクトは、要素のコンテンツ・ボックスを埋めるように表示されます。アスペクト比が合わない場合は、ボックスの長辺に合わせてコンテンツが引き伸ばされます。これが初期値です。
contain- オブジェクトは、アスペクト比を維持したまま要素のコンテンツ・ボックスに収まるように拡大縮小されます。オブジェクト全体がボックスの中に表示され、アスペクト比が合わない場合は余った領域が背景色となりレターボックスの表示形式となります。
cover- オブジェクトは、アスペクト比を維持したまま要素のコンテンツ・ボックスを埋めるように表示されます。アスペクト比が合わない場合は、オブジェクトの長辺が範囲からはみ出すように切り取られます。
none- オブジェクトは、元のサイズのまま表示されます。
scale-down- オブジェクトは、
noneまたはcontainのいずれかで、より小さいサイズで配置可能な方を採用します。
object-fitの使い方とサンプルコード
object-fitプロパティの構文は以下の通りです。
/* キーワード値 */
object-fit: contain;
object-fit: cover;
object-fit: fill;
object-fit: none;
object-fit: scale-down;
/* グローバル値 */
object-fit: inherit;
object-fit: initial;
object-fit: revert;
object-fit: unset;
object-fitの実例
それでは実際にobject-fitプロパティの書き方を見ていきましょう。以下の例は、CSSで<img>要素のサイズを固定した上で、アスペクト比や寸法の異なる画像を読み込んでいます。
これを見て分かるように、画像のサイズ指定はコンテンツそのもののwidthやheightを調整しているわけではなく、あくまでHTML要素によって生成されたボックスにソース元のコンテンツを置換要素として流し込んでいるのです。
これを理解すると、画像や動画をレイアウトに合わせて配置したり、中央寄せやトリミングの指定がしやすくなります。ぜひ習得して行きましょう。
<div class="samp_box">
<div class="of_1">
<h2>object-fit: fill;</h2>
<img src="/images/sample_photo_628x370.png" alt="サンプル画像">
<img src="/images/sample_photo_628x370.png" alt="サンプル画像">
</div>
<div class="of_2">
<h2>object-fit: contain;</h2>
<img src="/images/sample_photo_628x370.png" alt="サンプル画像">
<img src="/images/sample_photo_628x370.png" alt="サンプル画像">
</div>
<div class="of_3">
<h2>object-fit: cover;</h2>
<img src="/images/sample_photo_628x370.png" alt="サンプル画像">
<img src="/images/sample_photo_628x370.png" alt="サンプル画像">
</div>
<div class="of_4">
<h2>object-fit: scale-down;</h2>
<img src="/images/sample_photo_628x370.png" alt="サンプル画像">
<img src="/images/sample_photo_628x370.png" alt="サンプル画像">
</div>
<div class="of_5">
<h2>object-fit: none;</h2>
<img src="/images/sample_photo_628x370.png" alt="サンプル画像">
<img src="/images/sample_photo_628x370.png" alt="サンプル画像">
</div>
</div>
.samp_box {
overflow: auto;
padding: 0 1rem 1rem;
background: #eee;
}
.samp_box h2 {
margin: 1rem 0 0;
font-size: 1rem;
}
.samp_box img {
border: 1px solid #333;
background: #fff;
}
.samp_box img:nth-of-type(1) {
width: 100px;
height: 100px;
}
.samp_box img:nth-of-type(2) {
width: 200px;
height: 100px;
margin-left: 1rem;
}
.of_1 img {
object-fit: fill;
}
.of_2 img {
object-fit: contain;
}
.of_3 img {
object-fit: cover;
}
.of_4 img {
object-fit: scale-down;
}
.of_5 img {
object-fit: none;
}
画像を要素の中央に配置する
object-fitとobject-positionを利用すると、画像を画面の中央に寄せることが簡単になります。詳しくは、画像要素のボックスと画像の配置位置を切り離して制御できるobject-positionの解説を参照してください。
以下の内容は、<img>要素のみで実現しています。ボックスの横幅を可変式にして中央に画像を配置しています。これはボックスのサイズやアスペクト比がいかなるものであっても、画像を中央に配置できることを意味します。実は既定値ではこれと同じ方法で配置されますが、object-fitによる自動調整が働くために画像の寸法が変わってしまうのです。
さらに、サンプルでは<img>要素そのものに背景画像を配置しています。このような応用が利くのも、コンテナとオブジェクトを分けて考える時の利点です。resizeに対応しているブラウザであれば、コンテナの横幅を変更できます。画像が中央に寄ったまま移動するので確認してみましょう。
<div class="samp_box">
<div>
<h2>object-position: center center;</h2>
<img src="/images/sample_square_100.png" alt="サンプル画像">
</div>
</div>
.samp_box {
overflow: auto;
padding: 0 1rem 1rem;
background: #eee;
resize: horizontal;
}
.samp_box h2 {
margin: 1rem 0 0;
font-size: 1rem;
}
.samp_box img {
width: 100%;
height: 200px;
border: 1px solid #333;
background: url(/images/sample_photo_1200x630.jpg) center no-repeat;
object-fit: none;
object-position: center center;
}