Единицы просмотра, сохраняя пропорции?
Итак, я только что обнаружил единицы просмотра, и я действительно хочу их использовать.
Первая проблема: «Мой элемент» имеет «базовый размер» 760x670 пикселей. Я хочу использовать единицы просмотра, чтобы увеличить его так, чтобы либо высота100vh
или ширина100vw
в зависимости от того, что меньше.
К сожалению, хотя я могу использовать100vmin
чтобы получить меньшее из двух, я могу применить его только к ширине или высоте, а не к обоим.
В настоящее время я использую:
#root {
width: 760px;
height: 670px;
width: 100vw;
height: calc(670vw/760);
}
Это масштабирует ширину, чтобы соответствовать экрану, приводя к вертикальной прокрутке. Это не так уж плохо, но я бы предпочел, чтобы на самом деле он соответствовал области просмотра.