こんにちは。毎日ソファで寝る男、フロントエンドエンジニアのザワです。
この度、知らなければ損をしている、知っておけば得しかない、視野が広がるCSSの妙シリーズを開始する運びになりました。
今回は、object-fit編です。
はじめに
object-fit、みなさんはバリバリ使いこなしていますか？ 私はというと、バリバリ使っています。それこそ、レガシーなCSSやっちゃってるんじゃないの！？ SEOで画像検索に注目が高まっているのにbackgroundやっちゃってるの！？ なんて上から目線で言いたくなってしまいます。だって、object-fitを知っているから。
じゃあobject-fitって何ができるの！？ 美味しいの！？ ってな具合に気になってしまいますよね。そうでしょう。
ざっくり説明すると、background-sizeプロパティでcoverやらcontainやらで、諸々やっていたことができます。
img要素でね！
なんならvideo要素でもできちゃいますよ！
でもvideo要素で使う時はしっかりとcaniuseで対応ブラウザ確認してね！
polyfillもvideo要素に対応してるものを選んでね！
ということでダイジェストでほとんどの内容を既に話してしまったので、残りはデモでもご覧ください。
デモ
この画像を使用します。
面長です。
表示領域が幅100px高さ100pxの正方形、そこにこの面長画像をキレイに、しっぽりと表示させたいと思います。
div要素にbackground-sizeを、img要素にobject-fitを指定します。
background-sizeプロパティとobject-fitプロパティ、どちらにもcover、containがあります。
他の値の指定方法もありますが、今回はよく使うcoverとcontainを紹介していきます。未来の自分に期待するために、他の値も確認しておいてくださいね。
比べてみよう
では、2つ並べて比較してみましょう。
See the Pen
object-fit sample1 by Zawa (@sowork)
on CodePen.
- 初期値の状態では、dummyの文字が表示領域外にいて見えなかったり、びよーんと伸びてしまっています。
- object-fit:cover;は文字が中央にあり、威風堂々と自分がダミー画像であることを誇示しています。
- background-size:cover;は、文字が見切れています。惜しいです。
- object-fit:contain;は真ん中に面長画像が収まりきっています。
- background-size:contain;は、収まってはいるけども左に寄っています。
左に寄っているのが必ずしも悪いというわけではありませんが、今回は中央で揃えてみようと思います。
img要素の画像は既に中央なので放っておきます。div要素の背景画像をbackground-positionで中央寄せします。
See the Pen
object-fit sample2 by Zawa (@sowork)
on CodePen.
はい、揃いました。
今までcoverやcontainを使いたいがためにbackgroundを用いていた人が、object-fitに鞍替えする画が容易に想像できます。感慨深いですね。非対応ブラウザをサポートする場合は、polyfillは忘れないでくださいね。
おわりに
object-fit、フィットで思い出しましたが、クロスフィットトレーニングをしてみたいと思っています。筋力、筋持久力、筋肥大、全てに効果が期待できる、なんて噂を聞いたり聞かなかったり。瞬発系筋力を高めるためにクレアチンを取りはじめたので、負荷が高いトレーニングを考えるとよだれが出そうです。
話しはそれてしまいましたが、object-fit、なんでもすっぽりハマると気持ちがいいものですよね。猫が段ボールに入るのが好きなのも頷けます。
それでは、良い制作ライフを！ ザワでした。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
