Zenn
😸

2ステップでobject-fitを自動でIE11に対応させる

2020/12/07に公開
CSS
frontend
tech

object-fitをIE11でも何も気にせず使いたい人向けの記事です。
簡単2ステップで実はできます。😺

1.ポリフィルの導入

まずはJavaScriptの力を借りてIE11に対応させます。
https://github.com/fregante/object-fit-images

$ npm i object-fit-images
yourJavaScriptFile
import objectFitImages from 'object-fit-images';

objectFitImages();

//または公式の様に

const oneImage = document.querySelector('img.some-image');
objectFitImages(oneImage);

使い方は簡単

公式のそのまま引用。

.your-favorite-image {
  object-fit: contain;
  //この様にfont-familyに追記します。
  font-family: 'object-fit: contain;';
}

.your-favorite-image {
  object-fit: cover;
  object-position: bottom;
  //object-positionとも併用可能
  font-family: 'object-fit: cover; object-position: bottom;';
}

2.PostCssのプラグインでfont-familyを自動付与する

font-familyを手動で書くのは人間がやることではありません。
自動化しましょう🤖

https://github.com/ronik-design/postcss-object-fit-images

$ npm i postcss-object-fit-images -D

postcss.config.jsに追記する

postcss.config.js
module.exports = {
  plugins: [
    //autoprefixerの設定など...
    require('postcss-object-fit-images'),
  ]
}

3.自由にobject-fitを使う

以上の2ステップであなたはIE11を気にすることなく自動でobject-fitが使えるようになります😎

Discussion