CSSで画像トリミング！IE11での実装方法【object-fit】｜カケウェブ

レスポンシブデザインなんかでたまにある・・・PCとSPのデザインファイルを見て画像のトリミングが違う場合、「うええええええめんどおおおおおお」ってなりますよね？
わかるー、コーダーあるあるです。

少しトリミングが変わるかもしれませんが、CSSだけで画像をトリミングすることができます。
許容範囲ならこれで十分かな？

CSSだけで画像をtリミングする

今回使うのは「object-fit」！
こいつ１行で簡単に画像をトリミングできちゃいます。
準備した画像はw:500×h:1000でトリミングしたいのはw:300×h:300とすると指定の位置だけトリミングできちゃう。

何も考えず画像をw:300×h:300似しようとするとこんな感じですね。

img {
  width: 300px;
  height: 300px;
}

対比があかんことに・・・なりますね。
では、トリミングするコードを追加するとこんな感じ。

img {
  width: 300px;
  height: 300px;
  object-fit: cover;
}

何も考えずとも中央で画像がw:300×h:300でトリミングされます。
これはやべえ簡単だ(^q^)

トリミングできてええも中央だけじゃちょっと・・・という場合も安心！
「object-position」でトリミング位置も調整可能です。

「object-position: 横位置縦位置;」で調整できます。

img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  object-position: 0 100%
}

この前ほぼほぼ主要ブラウザは対応したもののIE11のみ非対応。
IE11はまだ使っている人多いので見逃せませんよね。
早くサポート切ってほしい。
IE11のためにコードを追加するのも面倒なので、JSで実装します。
プラグインがあるのでI11対応も楽々です。

・「fitie.js」を読み込ませます。
以上！
「object-position」がこれだけでは対応できませんが、中央でいいよって方ならこれが一番楽にI11対応させる方法です。

他にも「object-fit-images」を使う方法、CSSを使って対応させる方法もあります。
細かな位置調整をする場合は、「object-fit-images」、「CSS調整」は必須になります。

またこの２点の実装方法は追記しますので少々お待ち下さい！

web制作を勉強したい方におすすめの教材も紹介しているので是非参考にしてみてください。
web制作の勉強にオススメの書籍を紹介します！