IEを無視していい風潮になってきたのでどんどんやっていきましょう。
どういうアレか。
例えば投稿記事のアイキャッチ画像を寸法指定しても無視される場合。レスポンシブで微妙に余白が生まれてモヤモヤする場合。せっかく組んだのに<img>に突っ込む画像がアレだから、運用がウンコでデザイン崩れちゃうよとか、なんか上手くいかないんだけどとかいうときに、backgroundで指定すればいいじゃんとか、position:absolute;でうまいことやればいいじゃんって話にもなるけど、他にも選択肢があるよっていう感じで。
「object-fit」ってのがある。
簡単に言えば、background的な処理を<img>でできるよっていうやつ。
使い方自体は専門的な記事を読んだほうが早いし確実なので割愛。
IEは非対応
鉄板のチェッカー「Can I use…」で確認すると、IEだけが非対応。
IE11は2022/6/15に終了予定なので、そのうち全ブラウザが対応するという解釈でも問題ないっちゃない。
現状で導入したい場合、万全を期すならjsで補完する事ができる。
まあまずはアナリティクスで確認してみて、使いたいサイトをIEで見てる人がいるかどうかをチェックしたらいいんでないかなと思う。全員に問題なく見れる環境も素晴らしいことなんだけど、旧環境から脱出できない人は現場かなりの少数なんで、それを切って使い勝手を良くすることを優先するのもいいと思うんですよね。
使用例
<div class="wrap">
<img src="https://placehold.jp/980x560.png" alt="">
</div>.wrap{
width: 400px;
height: 600px;
}
.wrap img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}こんな感じ。「object-position」をセットで覚えておけば基本的に問題ない。
応用
<picture>を使えばブラウザ幅指定で画像の切り替えをすることができる。
<picture>
<source srcset="https://placehold.jp/800x1200.png" media="(max-width: 800px)">
<img src="https://placehold.jp/980x560.png" alt="" />
</picture>いよいよCSSじみてきて、とても便利になっている。
cssファイルに記述するのはめんどいけど、だからってhtml上にstyleで追記するのも嫌だみたいな気持ちとか状況のときにhtmlタグで書けることは精神衛生にとてもよろしい。で、これとobject-fitを絡めると記事一覧をはじめ、かなりの自由度を持って構成できる。とてもいい。
コメント