[css]imgをbackgroundみたいに設定する方法

IEを無視していい風潮になってきたのでどんどんやっていきましょう。

どういうアレか。

例えば投稿記事のアイキャッチ画像を寸法指定しても無視される場合。レスポンシブで微妙に余白が生まれてモヤモヤする場合。せっかく組んだのに<img>に突っ込む画像がアレだから、運用がウンコでデザイン崩れちゃうよとか、なんか上手くいかないんだけどとかいうときに、backgroundで指定すればいいじゃんとか、position:absolute;でうまいことやればいいじゃんって話にもなるけど、他にも選択肢があるよっていう感じで。

「object-fit」ってのがある。

object-fit - CSS: カスケーディングスタイルシート | MDN
CSS の object-fit プロパティは、置換要素、例えば や などの中身を、コンテナーにどのようにはめ込むかを設定します。

簡単に言えば、background的な処理を<img>でできるよっていうやつ。

使い方自体は専門的な記事を読んだほうが早いし確実なので割愛。

IEは非対応

鉄板のチェッカー「Can I use…」で確認すると、IEだけが非対応。

"object-fit" | Can I use... Support tables for HTML5, CSS3, etc
"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

IE11は2022/6/15に終了予定なので、そのうち全ブラウザが対応するという解釈でも問題ないっちゃない。

The future of Internet Explorer on Windows 10 is in Microsoft Edge
For our readers in Japan and Korea, please use these links: 한국어 블로그와 FAQ는, 여기를 참조하세요. 本ブログの日本

現状で導入したい場合、万全を期すならjsで補完する事ができる。

GitHub - fregante/object-fit-images: 🗻 Polyfill object-fit/object-position on : IE9, IE10, IE11, Edge, Safari, ...
🗻 Polyfill object-fit/object-position on <img>: IE9, IE10, IE11, Edge, Safari, ... - GitHub - fregante/object-fit-images: 🗻 Polyfill object-fit/object-pos...

まあまずはアナリティクスで確認してみて、使いたいサイトを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」をセットで覚えておけば基本的に問題ない。

object-position - CSS: カスケーディングスタイルシート | MDN
object-position プロパティは、ボックス内における置換要素の配置を指定します。Areas of the box which aren't covered by the replaced element's object will show the element's background.

応用

<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を絡めると記事一覧をはじめ、かなりの自由度を持って構成できる。とてもいい。

コメント

タイトルとURLをコピーしました