【object-fit】background-sizeと同じ挙動をimgタグに適用できる「object-fit」プロパティが便利過ぎて泣いた【便利CSS】

こんにちは。
Webデザイナーの野尻です。

今回は最近使って非常に便利だったCSSプロパティ「object-fit」を紹介したいと思います。

画像ギャラリーを作るときにディ・モールト(非常に)便利

wordpressでCMS実装するときなんかに、よくある要望のひとつが「画像ギャラリー」です。
例えばこんな感じで、四角の枠に画像を美しく収めたギャラリーを実装したいとします。

しかし、実際に運用が始まってみると、↓みたいな感じになってしまうことがよくあります。

投稿される画像のサイズがまちまちなため、枠に収まり切らない部分がはみ出してしまうんですね。

CSSをこねくりまわすことで、やりようはあるのですが、微妙にソースが複雑になったりうまくハマってくれないことなどが多くありました。
これを一発で解決してくれるのが、「object-fit」プロパティ

使い方はbackgroud-sizeとほぼ同じイメージ

↑のような感じでimgタグに一行するだけで↓みたいなトリミングを実現できます!

「cover」も便利ですが、場合によっては画像全てを枠内に収めたいときもあると思います。

そんなときは「contain」

このソースで↓のようなトリミングを実現できます。

ほとんど「backgroud-size」プロパティと同じ感覚で使用できますね!

スクリプト「object-fit-images」適用でIEやEdgeにも対応

こういう便利な機能を使おうとすると出てくる敵(IE)。
例によってIEは未対応、EdgeはVer15まで未対応です。。
しかし!スクリプト「object-fit-images」の導入によって、これらのテキを蹴散らすことが可能です!

使い方は簡単でjsを読み込ませて、object-fitを適用させたCSSスタイルの中に特定のfont-familyを適用するだけ

【スクリプト】

【CSS】

これでIEやEdgeも気にせずに使うことができますね!
今まで思考錯誤して実装していたギャラリーでしたが、本当に簡単に実装できるようになったなーというお話でした。

ビーズクリエイトでは、画像ギャラリー機能付きのCMS構築も月額プランでご提供します!詳しくはこちら

野尻

この記事を書いた人: 野尻

ビーズクリエイト Webに関する色々を担当しています。

あわせて読みたい