Когда‑то я писал про вёрстку пропорционального модуля с помощью хитрости с падингом. Это был неочевидный и не самый удобный способ вёрстки, но надёжных альтернатив с хорошей поддержкой браузеров тогда не было.

Свойство 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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы