【CSS】object-fitの使い方【img要素の縦横比固定方法】

HTML/CSS

2020.05.242021.08.24

この記事にはアフィリエイト広告および広告が含まれています。

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

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

object-fitプロパティ
値の設定について
サンプル
まとめ

object-fitプロパティ

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

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

値の設定について

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

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

サンプル

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

さっそく、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
縦横比そのまま、画像の上下トリミング

contain
縦横比そのまま、要素の右側が空いた状態

fill
画像全体をimg要素のサイズに合わせて表示。
画像が押しつぶされたような見た目。

none
画像をimg要素のサイズに合わせて一部分切り取っている。

scale-down
このサンプルでは、containが適用されています。

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

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