Карточка Junior Вёрстка на практике обновлено
Пропорции блока через aspect-ratio
Вопрос
Как сделать блок с пропорцией 16:9, растягивающийся по ширине?
Попробуйте сами
Ответьте про себя или вслух, потом откройте ответ и сверьтесь.
Показать ответ и разбор
Коротко
width: 100%; aspect-ratio: 16 / 9;. Высота вычислится из ширины.
Ответ
width: 100%; aspect-ratio: 16 / 9;. Высота вычислится из ширины. Для картинки внутри добавляют object-fit: cover, чтобы она заполнила рамку без искажений.
Разбор
Раньше то же делали через padding-top: 56.25% у обёртки, сейчас это не нужно.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.