LOVELOVELOVELOVELOVE <3 Happy Coming New Year <3
Новые сообщения профилей
5 лет на форуме.. вот это время бежит конечно быстро..
Часто сталкиваюсь с тем, что при верстке необходимо сделать блок, высота которого зависела бы от его ширины. Чтобы изменяя ширину блока, пропорционально изменялась его высота. Например для карточек товаров или же вставки стримов на сайт. Давно использую одну хитрость, использование которой я практически не встречал в других работах.
Пощупать код:
HTML:
<div class="player">
<div class="player__content">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/MebTPHCoAFY" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
</div>
</div>
CSS:
.player{
width: 600px; // Ширина плеера, может быть в процентах.
position: relative;
}
.player::after{
content: '';
display: block;
width: 100%;
padding-bottom: 56%; // Хитрость именно тут =)
position: relative;
z-index: 1;
}
.player__content{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}Пощупать код:
Вы не можете просматривать ссылку пожалуйста воспользуйтесь следующими ссылками Вход или Регистрация
qq detki
Одностраничник. Без доп страниц и без верстки (Figma) — 2000 ₽
Disron Arena:
Hello.
Discord - Pumbaa#8386
Золотыми рыбками быть не просто