CSS

CSSだけで画像トリミングする方法!IE11での対応方法も!!

動的な部分やPC、SPで画像の対比が変わる時、1つ1つ画像を書き出すのはめんどくさいですよね。
今時CSSだけで簡単に画像とリミングができるので、今回紹介します。

CSSだけで画像トリミングする方法

まずは普通に画像サイズ指定してみると・・・

 

画像の対比が変わってしまうよね・・・。
今回は「object-fit:cover」を使います。

では、トリミングするコードを追加するとこんな感じ。

 

何も考えずとも中央で画像が幅:500px 高さ:500pxでトリミングされます。
めちゃくちゃ簡単!!

 

画像のトリミング位置を指定してトリミングする

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

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

 

 

object-fitのIE11対応について

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

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

ABOUT ME
シラツキ
当ブログは同人サークル「にんじんみるく」のシラツキが運営する個人ブログです。 同人誌即売会の情報やネタ、技術的な内容など様々なコンテンツを配信しています。 普段はwebサイト作ってる人インターネッツお絵かきマン。 Webサイトの制作、ECサイトの運営、ブログ、イラスト制作など色々やってます。 個人でWeb技術ブログ、趣味のブログ、YouTube活動中。

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

お仕事・ご依頼について

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)