CSS

CSS アスペクト比を維持する

はじめに

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

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を使用すると対応できるそうです。こちらの記事が分かりやすかったので是非参考にしてみてください。


参考サイト
object-fit - CSS - MDN - Mozilla
一歩先行くCSS 第1回 object-fitとobject-position
object-fitとobject-positionで画像をトリミングする方法(IE・Edge対応)