object-fitをIEに対応させる【SCSS Mixin】

CSSのプロパティ[object-fit]が出てから、画像を楽にコンテナにフィットさせることが可能になりました。
それまではPositionで行っていたんですよね。
 
しかしこの便利なobject-fitは、IEに対応しておりません。
 
そこでobject-fit-imagesでIEに対応させつつ、
使い回しやすくするためにSCSSのMixinを作成しました。
 

object-fitをIEに対応させる

object-fit-images

以下のサイトから、object-fit-imagesをダウンロードして、サイトに読み込ませます。

 
必要なファイルは「dist」の中のみです。
 

読み込み例

object-fit-imagesの実行

object-fit-images本体を読み込んだら、
以下のコードを<body>内の適当な箇所に追記します。

Mixin

  • $type ⇒ cover, contain
  • $x ⇒ 横位置
  • $y ⇒ 縦位置

呼び出し側

お問い合わせ

    お気軽にお問い合わせください。
    お電話やご訪問での営業はいたしませんので、ご安心ください。

    お名前

    メールアドレス

    電話番号

    お問い合わせ内容