Когда‑то я писал про вёрстку пропорционального модуля с помощью хитрости с падингом. Это был неочевидный и не самый удобный способ вёрстки, но надёжных альтернатив с хорошей поддержкой браузеров тогда не было.
Свойство aspect‑ratio в 2023 году поддерживается в 93% браузеров. Для поддержки остальных браузеров можно использовать @supports.
Сегодня во всех основных браузерах работает современный и удобный способ задать пропорцию элемента одним свойством и без лишних заморочек.
Свойство aspect‑ratio в 2023 году поддерживается в 93% браузеров. Для поддержки остальных браузеров можно использовать @supports.
Свойство aspect-ratio рекомендует элементу пропорцию ширины к высоте. При изменении ширины, высота изменится пропорционально.
Свойство лишь рекомендует пропорцию и не задаёт размеры строго. Если высота содержимого превысит высоту элемента, он вырастет и пропорция нарушится.
.box {
aspect-ratio: 16/10;
padding: 18px;
box-sizing: border-box; /* Включаем размеры падингов в ширину и высоту, чтобы не нарушить пропорцию размерами падингов */
}Вёрстка — это так увлекательно и круто!
Вёрстка — это так увлекательно и круто!
Каждый месяц появляется какая‑то новая интересная и необычная штуковина, поддерживая тебя в тонусе и не давая уже наконец профессионально умереть в гамаке на пляже Таиланда
См. также:
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.