aspect-ratio.css by Tom Lutzenberger

Included aspect ratios

aspect-ratio.css features lot of common ratios in both orientations:

Horizontal orientation

5:4

4:3

3:2

16:10

5:3

16:9

2:1

21:9

Vertical orientation

4:5

3:4

2:3

10:16

3:5

9:16

1:2

9:21

Special aspect ratios

Some of the included ratios are special and therefore got/need special names:

Square
(1:1 Alias)

Golden ratio
(16.18:10)

Golden ratio
(vertical)

Basic usage

The library is simply used by applying the base class .ar in combination with a ratio class .ar-[width]-[height]. If you plan to insert content, you need to add .ar-content inside.

1:1

4:3

16:9

Examples


<div class="ar ar-1-1"></div>


<div class="ar ar-16-9">
  <div class="ar-content">16:9</div>
</div>

Vertical orientation

Just switch the numbers respectively add -v to the ratio class.

1:2

9:16

Golden ratio vertical

3:4

Examples


<div class="ar ar-9-16">
  <div class="ar-content">9:16</div>
</div>


<div class="ar ar-golden-v">
  <div class="ar-content">Golden ratio vertical</div>
</div>

Vertical centering

Insert an additional element with the class .ar-center.

1:1

Vertical
centered
content

16:9

Example


<div class="ar ar-16-9">
  <div class="ar-content">
    <div class="ar-center">
      <p>16:9</p>
    </div>
  </div>
</div>

Nesting

Warning!

May cause unexpected results. Make sure you handle the nested elements width properly.

2:1

1:1

16:9

1:1

Example


<div class="ar ar-2-1">
  <div class="ar-content">
    2:1
    <!-- row + columns -->
    <div class="ar ar-1-1">
      <div class="ar-content">
        1:1
        <!-- row + columns -->
        <div class="ar ar-16-9">
          <div class="ar-content">16:9</div>
        </div>
      </div>
    </div>
  </div>
</div>