@wakenbyWork

Как сделать aspect-ratio: 16 / 9 с помощью padding?

В общем есть фрейм с видео из вк. Хочу для него сделать aspect-ratio: 16 / 9 для красивого адаптива, но поддержка не очень хорошая.

Как можно padding сделать 16/9? Что то не могу понять и найти))
  • Вопрос задан
  • 704 просмотра
Решения вопроса 2
alexey-m-ukolov
@alexey-m-ukolov Куратор тега CSS
h1 {
  overflow: hidden;
  height: 0;
  padding-top: 56.25%;
  background: url(/images/happy-birthday.svg);
}

https://css-tricks.com/aspect-ratio-boxes/
Ответ написан
Комментировать
artzolin
@artzolin
php, WordPress разработка сайтов artzolin.ru
.aspect-ratio {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 56.25%; /* 16:9 Aspect Ratio */
	overflow: hidden;
}

.aspect-ratio iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-width: 0;
	outline-width: 0;
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
19 мар. 2024, в 11:54
3000 руб./за проект
19 мар. 2024, в 11:52
3000 руб./за проект
19 мар. 2024, в 11:49
10000 руб./за проект