Image Ratios

Version: 0.9.0

Edit

Utilities for defining a specific aspect ratio for an element.

4:3 Ratio

4:3 ratio

<!-- image ratio 4:3 -->
<div class="u-image-4x3">4:3 ratio</div>

2:1 ratio

<!-- image ratio 2:1 -->
<div class="u-image-2x1">2:1 ratio</div>

5:2 ratio

<!-- image ratio 5:2 -->
<div class="u-image-5x2">5:2 ratio</div>

3:1 ratio

<!-- image ratio 3:1 -->
<div class="u-image-3x1">3:1 ratio</div>

square ratio

<!-- image ratio square -->
<div class="u-image-square">square ratio</div>

3:4 ratio

<!-- image ratio 3:4 -->
<div class="u-image-3x4">3:4 ratio</div>

1:2 ratio

<!-- image ratio 1:2 -->
<div class="u-image-1x2">1:2 ratio</div>

2:5 ratio

<!-- image ratio 2:5 -->
<div class="u-image-2x5">2:5 ratio</div>

1:3 ratio

<!-- image ratio 1:3 -->
<div class="u-image-1x3">1:3 ratio</div>