object-fitが効かない場合、以下の原因が考えられます。

  1. 「object-fit」を img に対して効かせていない
  2. <img>に「width」「height」の指定がない
  3. 親要素の問題
  4. Internet Explorer を使っている
  5. キャッシュの問題

object-fit「img」や「video」タグに直接指定してあげないと正しく反映されません。
また Internet Explorer を使用している場合はサポートされていないので不可です。

「object-fit」の使い方

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

下記のコードのように指定するとobject-fitが正常に機能します。

HTML:

<div class="box">
	<img src="https://example.com/images/example.jpg" alt="サンプル画像" width="300" height="200" >
</div>

CSS:

.box {
	width: 800px;
	height: 800px;
	border: 1px solid #000;
}
.box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

なお「object-fit」の詳しい仕様については下記の記事をご覧ください。

親要素の大きさに依存して画像の表示方法を変える[object-fit]プロパティの使い方。