ギャラリーとして画像を並べたり
新着情報の要素の一つとしてサムネイルを表示したりしますが、
よく起こる問題が
「画像の比率問題」
ですね。
四角い枠の中に綺麗に表示したいけど、
縦横比もバラバラだしどうしよう。
なんてことが度々起こります。
overflowで隠したりpositionで頑張って中央配置にしたリ、
backgroundに指定できる場合はbackground-sizeでcoverにしたり。
そんなことをしていましたが、
CSSの「object-fit」でも一発で解決できるのですね。
（最近知りました・・・）
◆object-fit
https://developer.mozilla.org/ja/docs/Web/CSS/object-fit
object-fitをcoverにして完了。
◆Can I use
https://caniuse.com/?search=object-fit
IE以外では大丈夫そうなのでほぼ安心して使えそうです。
とても簡単なので是非お試しを！
ぴの子
