HTML/CSS
アイキャッチ 猫

画像の縦横比を固定する方法で、cssに「object-fit」プロパティ「cover」を設定することにより、画像の縦横比を固定したまま指定のサイズで画像を配置することができます。
他にも「object-fit」プロパティを使うことで、どのように配置するか設定することができます。

今回は「object-fit」プロパティの使い方と設定値の内容を詳しく紹介していきたいと思います。

object-fitプロパティ

このプロパティは置換要素である、「iframe」「video」「img」など要素の中身(コンテンツ)をどのようにはめ込むかを設定します。

また、コンテンツをどのように配置するかは「object-position」プロパティを使用します。

値の設定について

object-fitプロパティは複数の値を設定することができます。
設定の内容を表にまとめてみました。
要素=img、コンテンツ=画像を見立てると、分かりやすいと思います。

説明
contain コンテンツはアスペクト比が固定されたまま、要素のサイズに収まるように表示されます。
要素とコンテンツのアスペクト比が合わない場合、要素の一部分がレターボックス表示になります。※ 要は何も表示されません。
cover コンテンツはアスペクト比が固定されたまま、要素のサイズに収まるように表示されます。
要素とコンテンツのアスペクト比が合わない場合、コンテンツが合わせるようにトリミングされます。
fill コンテンツが要素を満たして表示されます。
要素とコンテンツのアスペクト比が合わない場合、要素の大きさに合わせてコンテンツが引き延ばされます。
none コンテンツは拡大も縮小もされず、そのまま表示されます。
scale-down コンテンツは「none」または「contain」どちらかを指定した状態で、コンテンツが要素よりも小さい場合は「none」として表示されます。

サンプル

それでは実際に試してみましょう。
使用するのは、こちらの画像です。

object-fit サンプル画像

さっそく、HTMLとCSSを設定してみましょう。

<p>cover</p>
<img src="img/01.jpg" class="cover">

<p>contain</p>
<img src="img/01.jpg" class="contain">

<p>fill</p>
<img src="img/01.jpg" class="fill">

<p>none</p>
<img src="img/01.jpg" class="none">

<p>scale-down</p>
<img src="img/01.jpg" class="scale-down">
img{
    width: 180px;
    height: 60px;

    // 左端に寄せてサイズを見やすくしたかったので、設定
    object-position: left;

    // imgのサイズを分かりやすくするため、background-colorを設定
    background-color: #999;
}

.cover {
    object-fit: cover;
}

.contain {
    object-fit: contain;
}

.fill {
    object-fit: fill;
}

.none {
    object-fit: none;
}

.scale-down {
    object-fit: scale-down;
}

結果がこちらです。

cover
縦横比そのまま、画像の上下トリミング
object-fit確認 キーワードcover

contain
縦横比そのまま、要素の右側が空いた状態
object-fit確認 キーワードcontain

fill
画像全体をimg要素のサイズに合わせて表示。
画像が押しつぶされたような見た目。
object-fit確認 キーワードfill

none
画像をimg要素のサイズに合わせて一部分切り取っている。
object-fit確認 キーワードnone

scale-down
このサンプルでは、containが適用されています。
object-fit確認 キーワードscale-down

このように値「contain」「cover」「none」「scale-down」を使えばアスペクト比を変わらずコンテンツを設定することができます。
状況に応じて使ってみてください。

ただし、このプロパティは残念ながらIEには対応しておりません
また、このプロパティを対応させるためには、cssかHTMLの属性でサイズを設定する必要があります。
object-fitプロパティが対応されていない!状況に陥りましたら、まずはサイズが設定されているかを確認してみてください。

まとめ

今回はobject-fitプロパティの使い方をご紹介しました。
要素のサイズさえ指定できれば値の設定も簡単なので、使いやすいかと思います。

ただ、先述しましたようにIEでは、現在(2020年5月)使用することができません。別途対策が必要になりますね!
「object-fit-images」を使えばIEにも対応できそうなので、近いうちにこちらも紹介していきたいと思います。

次の記事