CSS

CSS object-fitで画像を簡単トリミング!IE11での実装方法も!

レスポンシブサイトを作る際に、PCとSPのデザインファイルを見て画像のトリミングが違う時、「わっしょおおおおい!めんどくさああああ」ってなるよね!

シラツキ
シラツキ
めちゃくちゃめんどくさい・・・

少しトリミングが変わるかもしれませんが、CSSだけで画像をトリミングすることができます。

CSSで画像をトリミングする

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

 

シラツキ
シラツキ
何も考えず画像を幅:300px × 高さ:300pxにしようとするとこんな感じ!

 

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

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

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

 

何も考えずとも中央で画像がw:300×h:300でトリミングされます。
これはやばい!捗る!!

 

トリミング位置を指定する

トリミングできてええも中央だけじゃちょっと・・・という場合も安心!
「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調整」は必須になります。

お仕事・ご依頼募集中!!

イラスト制作、webサイト制作、商品のご紹介など様々なお仕事を募集しております! 下記リンクよりお気軽にご連絡ください!

お仕事・ご依頼について