Как можно реализовать куб, грани которого, будут зависеть от ширины и высоты окна?

Question

[Дмитрий]

Добрый день! Постараюсь объяснить поподробнее... Допустим, есть у нас viewport, размеры которого 2000х1000. Теперь если присвоить divстиль padding: 50%, получим куб 2000х2000. Если уменьшать длину окна, все работает. НО! Если начать уменьшать высоту окна, куб не будет сокращаться, так сказать, следовать соотношению сторон, он просто переполнит окно по высоте. Это понятно, ведь его размеры зависят только от длины окна. Как можно реализовать куб, грани которого, будут зависеть от ширины и высоты окна?

UPD: Пример на codepen

Comments

[RAX7]

padding: 50vmin

[Дмитрий]

RAX7, Спасибо! Позже обязательно гляну. А есть ли возможность рассчитать это на основе ширины (width), допустим, средствами calc?

[RAX7]

Дмитрий, что именно рассчитать? Нужно взять минимум/максимум между width и height, и calc такое не умеет делать.

[Дмитрий]

RAX7, Все! Понял! Напиши как отдельный ответ. Отмечу решение.

Answer 1

[RAX7]

Чтобы грани куба зависели и от ширины и от высоты нужно взять минимум/максимум между width и height. CSS calc такое не умеет делать, но в некоторых случаях могут пригодиться единицы измерения vmin/vmax

Comments

[Дмитрий]

Еще раз, спасибо!

[RAX7]

Дмитрий, пожалуйста =)

Answer 2

[Александр Цымбал]

Для размеров относительно размеров viewport'а используйте измерения в vw/vh.
Для получения высоты относительно ширины используйте свойство aspect-ratio. Например aspect-ratio: 16 / 9;