アスペクト比を保持するビューポート単位？

Question

私はビューポートユニットを発見したばかりなので、実際に使用したいと思います。

最初のチャレンジ：私の要素のサイズは760x670ピクセルです。ビューポート単位を使用して、高さが100vh、または幅が100vwのいずれか小さい方になるようにスケールアップします。

残念ながら、私は100vminを使用して2つのうちの小さい方を得ることはできますが、両方を適用するのではなく、幅または高さにしか適用できません。

現在、私は使用しています：

#root { 
    width: 760px; 
    height: 670px; 
    width: 100vw; 
    height: calc(670vw/760); 
} 

これは、垂直方向のスクロールで、その結果、画面に合わせて幅を拡大縮小します。これはあまりにも悪いことではありませんが、実際にビューポートに合わせることができればそれを好むでしょう。

Answer 1

私はそれがIE10で働く行った：

#elem { 
    width: 100vw; 
    height: calc((9/16)*100vw); 
} 

@media (min-aspect-ratio:16/9) { 
    #elem { 
     height: 100vh; 
     width: calc((16/9)*100vh); 
    } 
} 

ライブデモ： Windows 7の）のために利用できるIE10（プレビュー版で開いhttp://jsfiddle.net/C2ZGR/show/（;再度サイズのウィンドウ、そのので、どちらかの幅または高さが非常に小さい）

私は16：9のアスペクト比を持つ要素を使用しましたが、コードは任意のアスペクト比で使用できます。16/9と9/16を希望のアスペクト比に置き換えてください。

Btw、IE10はこのデモが動作する唯一のブラウザです。 Firefox/Operaはまだビューポートユニットを実装しておらず、WebKitブラウザは現在、calc()の内部でビューポートユニットを使用できないバグがあります。