Поддерживать соотношение сторон Mixin онлайн урок.


В этой статье от июля 2013 года описан метод использования псевдоэлементов для поддержания соотношения сторон элементов, даже если он масштабируется.

Вот смесь Sass, которая немного упрощает математику.

@mixin aspect-ratio($width, $height) {
position: relative;
&:before {
display: block;
content: "";
width: 100%;
padding-top: ($height / $width) * 100%;
}
> .content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}

Mixin предполагает, что вы будете вставлять элемент с классом содержимого внутри вашего начального блока. Как это:

<div class="sixteen-nine">
<div class="content">
insert content here
this will maintain a 16:9 aspect ratio
</div>
</div>

Использование mixin так же просто, как:

.sixteen-nine {
@include aspect-ratio(16, 9);
}

Результат:

.sixteen-nine {
position: relative;
}
.sixteen-nine:before {
display: block;
content: "";
width: 100%;
padding-top: 56.25%;
}
.sixteen-nine > .content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

# Демо-версия

Вот демонстрация приведенного выше кода в действии. Анимация добавлена, чтобы показать элемент, поддерживающий присвоенное соотношение сторон при изменении размера.

Благодаря Шон Демпси ( @thatseandempsey ) для этого!