Соотношение сторон

С помощью модификатора .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-text-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-text-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-text-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-text-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-text-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-text-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-text-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-text-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-text-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-text-hint">4x3</div>
    </div>
  </div>
</div>