[解決済み] CSSでdivのアスペクト比を維持しつつ、画面の幅と高さを埋める？

質問

アスペクト比がほぼ固定のサイトを構築しています。 16:9 の横長で、動画のような固定アスペクト比のサイトを構築しています。

中央に配置し、利用可能な幅、利用可能な高さを満たすように拡大させたいが、決して左右に大きくならないようにしたい。

例えば

1. 背の高い薄いページでは、高さを比例して維持しながら、コンテンツが幅いっぱいに広がることになります。
2. 短い幅のページでは、コンテンツは幅を比例させながら、高さいっぱいに広がります。

私が見てきた方法は2つあります。

1. 正しいアスペクト比の画像を使用してコンテナを展開する div を使用することができますが、主要なブラウザ間で同じように動作させることができませんでした。
2. プロポーショナルな下部のパディングを設定するが、それは幅に対してのみ相対的に機能し、高さは無視される。幅に対して大きくなり続け、垂直スクロール バーが表示されるだけです。

JSで簡単にできるのは知っていますが、純粋なCSSのソリューションが欲しいのです。

何かアイデアはありますか？

どのように解決するのですか？

これに対応するために、新たに指定されたCSSプロパティがあります。 object-fit .

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

この機能は、現在では広くサポートされています ( http://caniuse.com/#feat=object-fit ).