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」の詳しい仕様については下記の記事をご覧ください。