Соотношение сторон CSS-элементов

Этот инструмент генерирует CSS для соотношения сторон ширина:высота, используя либо современное свойство `aspect-ratio`, либо классический хак с процентным padding. Он предоставляет популярные пресеты соотношений, пользовательские поля ширины/высоты (1-100), окно живого предпросмотра и готовый к копированию вывод. Предпросмотр адаптирует отрисовку под выбранный метод, чтобы вы точно видели, что даёт каждая техника.

1. Выберите пресет Common Ratio (16:9, 4:3, 1:1, 21:9, 3:2, 2:3, 9:16) или введите собственные Width и Height (1-100). 2. Выберите Method: Modern (`aspect-ratio`) или Padding Hack. 3. Окно Preview отрисует соотношение с использованием выбранной техники. 4. Нажмите Copy в карточке Output, чтобы скопировать сгенерированный CSS.

Modern выводит одну строку: `aspect-ratio: <width> / <height>;`. Padding Hack выводит `.container` с `position: relative; width: 100%; padding-top: <height/width*100>%;` и абсолютно позиционированный `.content`, заполняющий его — это устаревшая техника для сред без поддержки `aspect-ratio`. Предпросмотр использует те же стили с ограничением максимальной ширины 400px, поэтому визуальный результат соответствует технике, которую описывает CSS.