はじめに

アスペクト比を維持したまま画像を表示させたい、動画を画面いっぱいに表示させたいと思い調べました。

object-fit

CSSのobject-fitプロパティを使うとアスペクト比を維持させることができます。

値	説明
fill	要素のコンテンツボックス全体を埋めるサイズになる
contain	要素のコンテンツボックス内に合うサイズになり、アスペクト比を維持する
cover	要素のコンテンツボックス全体を埋めるサイズになり、アスペクト比を維持する
none	リサイズせずに表示する
scale-down	noneまたはcontainを指定したかのようになり、表示したいコンテンツがその要素よりも小さければnoneが適用される

初期値はfillです。しかし、動画の場合初期値はcontainになります。

今回はobject-fitプロパティについて書きましたが、調べている時にobject-positionプロパティを知りました。こちらもなかなか面白そうなので触ってみたいです。

コメントでご指摘いただいたので少し書かせてもらいます。

object-fitプロパティはIEとver15以下のEdgeで未対応です。対応するためのプラグインobject-fit-imagesを使用すると対応できるそうです。こちらの記事が分かりやすかったので是非参考にしてみてください。