UTILS.
100% в браузере

Блок соотношения сторон CSS

Создайте адаптивный блок соотношения сторон с запасным вариантом на padding.

Об этом инструменте

Введите соотношение ширины и высоты, чтобы создать адаптивный блок соотношения сторон, с современным CSS aspect-ratio и запасным вариантом через процент padding-top — всё прямо в браузере.

Часто задаваемые вопросы

Зачем включать запасной вариант на padding-top?
Приём с процентом padding-top воспроизводит фиксированное соотношение сторон в старых браузерах, которые не поддерживают современное свойство aspect-ratio.
Упрощается ли соотношение?
Да — значения вроде 16 и 9 сокращаются на их наибольший общий делитель, поэтому 1920 на 1080 показывается как 16 / 9.

Больше инструментов