CSS

CSS – object-fitが効かない場合

object-fitが効かない場合以下の原因が考えられます。object-fitは<img>や<video>タグに直接指定してあげないと正しく反映されません。また、Internet Explorerを使用している場合はサポートされていないプロパティになっています。

object-fitの使い方

下記のコードのように指定してあげるとobject-fitが正常に動作します。

ポイントとしてはobject-fitは<img>に対して指定し、画像のサイズを指定してあげることで動作します。

HTML

<div class="box_image">
	<img src="https://images.pexels.com/photos/5759270/pexels-photo-5759270.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="">
</div>

CSS

.box_image{
	width: 700px;
	height: 400px;
	background:#111;
}
.box_image img{
	width:100%;
	height:100%;
	object-fit:contain;
}

object-fitが効かない例

では、先程のHTMLコードを例にしてobject-fitが効かない失敗例をあげていきたいと思います。

<img>に指定していない

親要素にobject-fitを指定しても反応しません。なので、<img>タグに対して指定するようにします。

.box_image{
	width: 700px;
	height: 400px;
	background:#111;
	object-fit:contain;	   /* NG */
}
.box_image img{
	width:100%;
	height:100%;
}

<img>にwidth,heightの指定がない

width,heightにサイズの指定がないとobject-fitは動作しません。また、autoの場合も反応がないようです。

/* NG */
.box_image img{
	object-fit:contain;
}

/* NG */
.box_image img{
	width:auto;
	height:auto;
	object-fit:contain;
}

/* OK */
.box_image img{
	object-fit:contain;
	width:100%;
	height:100%;
}

Internet Explorerを使っている

残念ながらobject-fitはInternet Explorerでは現在サポートされていないようです。

キャッシュの問題

お使いのブラウザにキャッシュが残っているのか確認しましょう。