Генератор CSS aspect-ratio
Введите ширину и высоту, чтобы мгновенно получить соответствующее CSS-значение aspect-ratio в упрощённом виде и с наглядным предпросмотром. Вычисление выполняется целиком в вашем браузере, ничего не отправляется на сервер.
Как это работает
CSS-свойство aspect-ratio автоматически сохраняет пропорции элемента (изображения, видео, контейнера) при изменении его ширины, избавляя от хитростей с процентным padding. Этот инструмент вычисляет соотношение по введённым размерам, по возможности упрощает его и показывает предпросмотр получившегося прямоугольника.
Зачем использовать aspect-ratio вместо фиксированной высоты?
Фиксированная высота в пикселях ломает вёрстку на более узком или более широком экране; aspect-ratio сохраняет правильное соотношение ширины и высоты независимо от фактического размера элемента — это особенно удобно для адаптивных видео, карточек с изображениями и миниатюр в галерее.
Что означает отображаемое упрощённое соотношение?
Инструмент автоматически сокращает соотношение ширины к высоте до простейшего вида (например, 1920 / 1080 превращается в 16 / 9) с помощью наибольшего общего делителя, и значение становится нагляднее и удобнее для повторного использования в таблице стилей.
100% локальная обработка: вычисление и предпросмотр выполняются только в вашем браузере.