Вёрстка Junior Вёрстка на практике обновлено
Соотношение сторон 16:9
Условие
Блок .video должен сохранять пропорцию 16:9 при любой ширине. Высоту задавать в пикселях нельзя.
Что проверяют тесты
пропорция соблюдена
ширина по контейнеру
высота не задана в пикселях
Как подойти
aspect-ratio решает задачу одной строкой и поддерживается везде с 2021 года. Старый трюк - блок с padding-top: 56.25% (это 9/16) и абсолютно позиционированным содержимым внутри - работал потому, что вертикальные отступы в процентах считаются от ширины родителя. Назвать оба стоит: второй до сих пор встречается в чужом коде.
Подсказки: 2
- Есть отдельное свойство ровно для этого.
- Старый приём - padding-top в процентах от ширины.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.