Единицы просмотра, сохраняя пропорции?

Question

Итак, я только что обнаружил единицы просмотра, и я действительно хочу их использовать.

Первая проблема: у моего элемента "базовый размер" 760x670 пикселей. Я хочу использовать единицы просмотра окна, чтобы увеличить его так, чтобы либо высота 100vhили ширина 100vwв зависимости от того, что меньше.

К сожалению, хотя я могу использовать 100vmin чтобы получить меньшее из двух, я могу применить его только к ширине или высоте, а не к обоим.

В настоящее время я использую:

#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);
    }
}

Демонстрационная версия: http://jsfiddle.net/C2ZGR/show/ (откройте в IE10 (предварительная версия доступна для Windows 7); затем измените размер окна, чтобы ширина или высота была очень маленькой)

Я использовал элемент с соотношением сторон 16:9, но код может работать для любого соотношения сторон - просто замените 16/9, а также 9/16 с вашим желаемым соотношением сторон.

Кстати, IE10 - единственный браузер, в котором будет работать эта демонстрация. Firefox/Opera пока не реализует единицы просмотра, а в браузерах WebKit в настоящее время есть ошибка, из-за которой нельзя использовать единицы просмотра внутри calc(),