ウィンドウのアスペクト比によってcssを変えたい

Question

前提・実現したいこと

横長の画像があった場合に
PCでもスマホでも縦横いっぱい（中央よせをしてトリミング）に画像を表示したいです。
※横幅が100％の場合は上下余分な部分が切れて、縦幅が100％の場合は左右余分な部分が切れる

「横幅100％の場合」と「縦幅100％の場合」でトリミングされるように
それぞれのcssは実装できているのですが、

ウィンドウのアスペクト比によって切り替える方法がわからず、こちらで質問をさせていただきました。
メディアクエリを作っての切り替えはできるのですが、ウィンドウのアスペクト比で切り替えることはできるのでしょうか？

jqueryでアスペクト比を取得してきて、それでうまく変えられるかなとも思ったのですが、
調べてもなかなかできず。。。

ご存知の方がいらっしゃいましたら、ご教授いただけると嬉しいです。

よろしくお願い致します。

Answer 1

object-fit: cover;でできると思います。

【object-fit - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/object-fit

ウィンドウのアスペクト比で切り替えをしたければ@media (aspect-ratio: 1/1)など。

【aspect-ratio - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/@media/aspect-ratio

Comments

[kii.32]

ありがとうございます！
object-fitを使うことで対応できました！