Калькулятор соотношения сторон CSS

Соотношение сторон описывает пропорцию между шириной и высотой элемента. Оно записывается двумя числами через двоеточие, например 16:9, и не меняется при одинаковом масштабировании обоих размеров. Веб-разработчики используют пропорции, чтобы заранее резервировать стабильное место под изображения, видео, встроенный контент, карточки и адаптивные компоненты до завершения загрузки. Калькулятор сокращает любую пару целых размеров и создаёт соответствующее современное объявление CSS. Для сокращения используется наибольший общий делитель ширины и высоты. Для 1920 на 1080 он равен 120. Деление обоих размеров на 120 даёт 16 на 9. Десятичное значение — ширина, делённая на высоту, поэтому 16:9 примерно равно 1.7778. CSS допускает в aspect-ratio и сокращённые числа, и исходные размеры, но сокращённую форму проще распознать и проверить. Полученное объявление можно вставить в правило для обёртки изображения, видеокадра, элемента сетки или другого блока. Свойство aspect-ratio задаёт предпочтительное соотношение. Если ширина элемента определена, а высота автоматическая, браузер вычисляет высоту по пропорции. Если определена высота, а ширина автоматическая, можно вычислить ширину. Когда оба размера заданы явно, пропорция их не переопределяет. На итоговые размеры также влияют содержимое, минимальные и максимальные размеры, модель расчёта блока и ограничения макета. Сочетание width: 100% с соотношением сторон — распространённый способ создания адаптивных медиаконтейнеров. Соотношение сторон отличается от разрешения. Два изображения могут иметь пропорции 16:9, но сильно различаться числом пикселей, например 1280 на 720 и 3840 на 2160. Пропорция определяет форму, а разрешение — детализацию, размер файла и плотность отображения. Обрезка под новую пропорцию удаляет часть содержимого; полное вписывание в блок другой формы может оставлять пустое место. Значения CSS object-fit, такие как cover и contain, определяют поведение замещаемого содержимого внутри зарезервированного блока. Для предотвращения сдвигов макета используйте собственные размеры исходного ресурса. Атрибуты HTML width и height позволяют браузеру определить пропорцию, даже если адаптивный CSS меняет отображаемый размер. При выборе изображений под композицию или необычные контрольные точки проверьте, что каждый источник имеет нужное кадрирование. Подходят любые одинаковые единицы, поскольку важна только пропорция, но калькулятор требует целые числа, чтобы сокращение через наибольший общий делитель было точным, а результат — простым и предсказуемым.