Обеспечение сохранения соотношения сторон в области просмотра

В веб-дизайне сохранение соотношения сторон элементов при адаптации к изменяющимся размерам области просмотра имеет решающее значение. Это обеспечивает согласованность при различных размерах и ориентациях экрана. Чтобы добиться такого сохранения, особенно при работе с квадратным элементом, можно реализовать следующий подход CSS: Свойство -ratio предлагает надежное решение для управления соотношением сторон элементов. Указывая желаемое соотношение ширины и высоты, это свойство адаптирует размер элемента для поддержания указанного соотношения. Важно отметить, что адаптация размера ограничена наименьшим размером области просмотра, что соответствует требованию динамической настройки как альбомной, так и портретной ориентации.

Пример реализации

Для демонстрации функциональности свойства аспект-пропорции, можно использовать следующий код:

.ar-1-1 { соотношение сторон: 1/1; фон: оранжевый; } .ar-1-19 { соотношение сторон: 16/9; фон: розовый; } дел { максимальная ширина: 100vw; максимальная высота: 100vh; поле-дно: 5vh; }

В этом примере создаются два элемента div с разными соотношениями сторон (1:1 и 16:9). Свойство аспектного соотношения гарантирует, что независимо от ориентации устройства эти элементы div сохраняют желаемую форму и размер в пределах области просмотра. Кроме того, их размеры корректируются так, чтобы они соответствовали наименьшему размеру области просмотра, гарантируя сохранение квадратной формы.