Часто сталкиваюсь с тем, что при верстке необходимо сделать блок, высота которого зависела бы от его ширины. Чтобы изменяя ширину блока, пропорционально изменялась его высота. Например для карточек товаров или же вставки стримов на сайт. Давно использую одну хитрость, использование которой я практически не встречал в других работах.
Пощупать код:
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;
}Пощупать код:
