[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
The Internet Explorer 11 desktop application has retired and is out of support as of June 15, 2022, for certain versions of Windows 10.

現状で導入したい場合、万全を期すなら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 は CSS のプロパティで、ボックス内における置換要素の中身の配置を指定します。ボックスの領域内で置換要素のオブジェクトに覆われていない部分は、要素の背景が表示されます。

応用

<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をコピーしました