CSSで画像トリミング!IE11での実装方法【object-fit】

CSSトリミングCSS

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

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

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

今回使うのは「object-fit」!
こいつ1行で簡単に画像をトリミングできちゃいます。
準備した画像は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%
}

 

 

object-fitのIE11対応について

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

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

 

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

 

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

コメント

タイトルとURLをコピーしました