【便利CSSプロパティ｜object-fit】background-sizeと同じ挙動をimgタグに適用できる「object-fit」
こんにちは。
Webデザイナーの野尻です。
今回は最近よく使うCSSプロパティ「object-fit」を紹介したいと思います。
画像ギャラリーを作るときにディ・モールト（非常に）便利
wordpressでCMS実装するときに、よくある要望のひとつが「画像ギャラリー」です。
例えばこんな感じで、四角の枠に画像を収めたギャラリーを実装したいとします。
しかし、実際に運用が始まってみると、↓みたいな感じになってしまうことがよくあります。
投稿される画像のサイズがまちまちなため、枠に収まり切らない部分がはみ出してしまうんですね。
CSSをこねくりまわすことで、やりようはあるのですが、微妙にソースが複雑になったりうまくハマってくれないことなどが多くありました。
以前は、このあたりimgタグを使用せず、background-imageで見た目上表現していることもよくありました。
これを一発で解決してくれるのが、「object-fit」プロパティ
使い方はbackgroud-sizeとほぼ同じイメージ
img {
width: 300px;
height: 300px;
object-fit: cover; /* この一行を追加するだけ！ */
}
↑のような感じでimgタグに一行するだけで↓みたいなトリミングを実現できます！
「cover」も便利ですが、場合によっては画像全てを枠内に収めたいときもあると思います。
そんなときは「contain」
img {
width: 300px;
height: 300px;
object-fit: contain;
}
このソースで↓のようなトリミングを実現できます。
ほとんど「backgroud-size」プロパティと同じ感覚で使用できますね！
スクリプト「object-fit-images」適用でIEやEdgeにも対応
こういう便利な機能を使おうとすると出てくる敵（IE）。
例によってIEは未対応、EdgeはVer15まで未対応です。。
しかし！スクリプト「object-fit-images」の導入によって、これらのテキを蹴散らすことが可能です！
使い方は簡単でjsを読み込ませて、object-fitを適用させたCSSスタイルの中に特定のfont-familyを適用するだけ
【スクリプト】
【CSS】
img {
width: 300px;
height: 300px;
object-fit: cover;
font-family: 'object-fit: cover;'
}
font-familyは、object-fitの内容に対応させればOKです。
object-fit: contain;
ならば
font-family: ‘object-fit: contain;’
という具合です。
これでIEやEdgeも気にせずに使うことができますね！
今まで思考錯誤して実装していたギャラリーでしたが、本当に簡単に実装できるようになったなーというお話でした。
