今更ながら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は効かないけど画像が若干圧縮されるだけで致命的な問題ではない)、ということが確認できるので安心です。
にほんブログ村
「ひとりごと」ランキング参加中です。ポチッと応援お願いします♪
コメント