object-fitが効かない場合、以下の原因が考えられます。
- 「object-fit」を img に対して効かせていない
- <img>に「width」「height」の指定がない
- 親要素の問題
- Internet Explorer を使っている
- キャッシュの問題
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」の詳しい仕様については下記の記事をご覧ください。