CSSで画像一発トリミング「object-fit」について

技術メモ

今更ながらCSS3で本当に便利だと思うプロパティは、どんな画像も一発で賢くトリミングしてくれる「object-fit」です。分かりやすい例としては、たとえばサイトの看板画像など大きなイメージを、幅広〜幅狭までレスポンシブ対応したい、という時に重宝します。

「object-fit」の説明は以下の記事がとても分かりやすいです。
1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティ

主な使い方としては以下の通り:
object-fit: cover;
object-fit: contain;
object-position: 横の位置 縦の位置;

この中で、任意の縦横比のブロック内に綺麗に画像を自動トリミングしてくれるobject-fit: cover; が一番お役立ち。特にWordPressテーマ開発などで様々な縦横比の画像が読み込まれることを想定しながらデザインする時には非常に役に立ちます。

object-fitがIEに対応してない件

そんな便利な「object-fit」ですが、いままで使用を控える理由があったとすれば「IEに対応していない(できるけどIEハックが面倒くさい)」という理由ではないでしょうか。ただ、2020年の今でもまだそんなにIEのシェアがあるのか?と疑問に思って調べたところ、以下の記事(2020/2)が分かりやすかったです:

IEでのブラウザ確認にまだ意味はあるのか?

これを見ると、もうシェア的にIEに配慮する意味はあまりないように思われます。ただし、一部の企業/医療の現場ではシステム上の理由から未だにIEが使われていたりするので、そのような場で閲覧が想定されるサイトを設計する時には注意が必要かも知れませんが、今後はレアケースになっていくでしょう。

というわけで、長年悩まされてきたIE問題からほぼ解放され、いよいよCSS3の機能が自由に使えるようになってきたことを素直に喜んでいます。

Macでも使えるIEチェッカー

なお、MacユーザだけどどうしてもIEでも表示確認をしておきたい、という場合はこのIEチェッカーがおすすめ:
netrenderer

使い方はシンプルで、確認したいIEのバージョンを指定してURLを入力すると、IEでのレンダリング結果が画像として表示されます。たとえば「object-fit」を使ったWPテーマであれば、IE9以降なら何とか表示できる(object-fitは効かないけど画像が若干圧縮されるだけで致命的な問題ではない)、ということが確認できるので安心です。

にほんブログ村 その他日記ブログ ひとりごとへ
にほんブログ村 「ひとりごと」ランキング参加中です。ポチッと応援お願いします♪

コメント

この記事へのコメントはありません。

naochka

長年IT業界でWeb+デザインをやってました。いまはWordPress中心です。やや技術的な話が多いですが、なぜか世界中あちこち放浪してた関係でたまに想い出を綴ってたりもします。 Wall Street Journalを読む会の英語ナビゲーターやってます。(実は帰国子女)

最近の記事

  1. 第13回 Wall Street Journalを読む会:アメリカで実体経済と株価が乖離している理由とは?

  2. UAの二重計測問題の確認方法と解決策:UAとGA4を共存運用+All in One SEOで連携してる人は注意

  3. 初めてのWordPressテーマ選び、美麗デザインを購入するときは設定の難易度に気をつけて

  4. 第12回 Wall Street Journalを読む会:景気低迷でも失業者が少ない?謎現象のカギを握る国とは…

  5. WordPressでブログ始めたい人のために、収益系ブログと個人系ブログを比べてみた

次回のWSJ会開催@Peatix

アーカイブ

TOP