Адаптивное видео (пропорции)

Продолжаем тему вёрстки. Иногда нам нужно сделать адаптивное видео (или другой элемент с соблюдением пропорции - отношение ширины к высоте).

У этой задачи есть классическое решение - использовать абсолютное позиционирование и верхний внутренний отступ (например padding-top: 56.25%).

Однако не многие знают (мы теперь знаем!), что есть CSS-свойство aspect-ratio, которое как раз решает эту задачу очень просто 👇

https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

Кстати, Tailwind конечно имеет удобные классы для работы с этим свойством, например aspect-video - и адаптивное видео 16/9 готово! Так просто 😃 На сайте можно подвигать видео за ползунок справа от него и убедиться, что оно адаптивное 👇

https://tailwindcss.com/docs/aspect-ratio

Поддержка браузерами в принципе НЕ плохая - 86%. Все версии браузеров, выпущеные с 2021 года поддерживают:

https://caniuse.com/?search=aspect-ratio

Будем иметь ввиду!

#html #css #tailwind #tip