IE対応 img 要素を 親要素 いっぱい に 広げて 表示 する(object-fit)

[ ID : 230 ]
IE対応 img 要素を 親要素 いっぱい に 広げて 表示 する(object-fit)

概要

background-sizeのようなスタイルをimgで実現する。CSSプロパティのobject-fitとJavaScriptプラグインのobject-fit-imagesを利用してimg要素を親要素いっぱいに広げて表示する方法を紹介

用途

  • img要素をCSSだけでトリミングする
  • CSSプロパティーのobject-fitを利用
  • ※Microsoft Edge(15以下)・IEはJSプラグインobject-fit-imagesが必要

検証ブラウザ

  • Microsoft Edge(※Ver.15以下は要object-fit-images)
  • IE11(※要object-fit-images)
  • IE10(※要object-fit-images)
  • Google Chrome(最新)
  • Safari(最新)
  • Firefox(最新)

実装方法


HTML

<div class="c-block">
    <div class="c-block__elem">
        <img src="https://konocode.jp/img/common/dummy_600_400.png" alt="" class="js-object-fit">
    </div>
    <div class="c-block__elem">
        <img src="https://konocode.jp/img/common/dummy_500_500.png" alt="" class="js-object-fit">
    </div>
</div>

SCSS

.js-object-fit {
width: 100%;
height: 100%;
object-fit: cover;
font-family: 'object-fit: cover;'
}

JS

objectFitImages('.js-object-fit');

この記事をシェアする

新着記事

全ての記事を見る

KONOCODEのメリット 無料会員登録