Соотношение сторон
С помощью модификатора .aspect-ratio вы можете менять соотношение сторон элемента. Поддерживаются следующие соотношения сторон:
.aspect-ratio-1x1- 1 ширина х 1 высота.aspect-ratio-1x2- 1 ширина х 2 высота.aspect-ratio-2x1- 2 ширина х 1 высота.aspect-ratio-2x3- 2 ширина х 3 высота.aspect-ratio-3x1- 3 ширина х 1 высота.aspect-ratio-3x2- 3 ширина х 2 высота.aspect-ratio-3x4- 3 ширина х 4 высота.aspect-ratio-4x1- 4 ширина х 1 высота.aspect-ratio-4x3- 4 ширина х 3 высота
Применение
При использовании соотношения сторон высота определяется шириной объекта. Для использования, создайте следующую структуру:
4x3
<div class="wr-6">
<div class="aspect-ratio aspect-ratio-4x3">
<div class="aspect-ratio-content b-1">
<div class="align-middle t-center t-5 c-hint">4x3</div>
</div>
</div>
</div>Демонстрация
1x1
1x2
2x1
2x3
3x1
3x2
3x4
4x1
4x3
<div class="wr-5 mr-4 mb-4 float-left clear-fix">
<div class="aspect-ratio aspect-ratio-1x1">
<div class="aspect-ratio-content b-1">
<div class="align-middle t-center t-5 c-hint">1x1</div>
</div>
</div>
</div>
<div class="wr-5 mr-4 mb-4 float-left clear-fix">
<div class="aspect-ratio aspect-ratio-1x2">
<div class="aspect-ratio-content b-1">
<div class="align-middle t-center t-5 c-hint">1x2</div>
</div>
</div>
</div>
<div class="wr-5 mr-4 mb-4 float-left clear-fix">
<div class="aspect-ratio aspect-ratio-2x1">
<div class="aspect-ratio-content b-1">
<div class="align-middle t-center t-5 c-hint">2x1</div>
</div>
</div>
</div>
<div class="wr-5 mr-4 mb-4 float-left clear-fix">
<div class="aspect-ratio aspect-ratio-2x3">
<div class="aspect-ratio-content b-1">
<div class="align-middle t-center t-5 c-hint">2x3</div>
</div>
</div>
</div>
<div class="wr-5 mr-4 mb-4 float-left clear-fix">
<div class="aspect-ratio aspect-ratio-3x1">
<div class="aspect-ratio-content b-1">
<div class="align-middle t-center t-5 c-hint">3x1</div>
</div>
</div>
</div>
<div class="wr-5 mr-4 mb-4 float-left clear-fix">
<div class="aspect-ratio aspect-ratio-3x2">
<div class="aspect-ratio-content b-1">
<div class="align-middle t-center t-5 c-hint">3x2</div>
</div>
</div>
</div>
<div class="wr-5 mr-4 mb-4 float-left clear-fix">
<div class="aspect-ratio aspect-ratio-3x4">
<div class="aspect-ratio-content b-1">
<div class="align-middle t-center t-5 c-hint">3x4</div>
</div>
</div>
</div>
<div class="wr-5 mr-4 mb-4 float-left clear-fix">
<div class="aspect-ratio aspect-ratio-4x1">
<div class="aspect-ratio-content b-1">
<div class="align-middle t-center t-5 c-hint">4x1</div>
</div>
</div>
</div>
<div class="wr-5 mr-4 mb-4 float-left clear-fix">
<div class="aspect-ratio aspect-ratio-4x3">
<div class="aspect-ratio-content b-1">
<div class="align-middle t-center t-5 c-hint">4x3</div>
</div>
</div>
</div>