Ratio

Applies a fixed aspect ratio on any element.

<div class="o-ratio o-ratio--16-9">
	<img src="https://placeholdit.com/800x450/1d4ed8/ffffff" alt="">
</div>

Modifiers

Cover

Fill the ratio box with its content.

<div class="o-ratio o-ratio--16-9 o-ratio--cover">
	<img class="o-ratio__content" src="https://placeholdit.com/800x800/1d4ed8/ffffff" alt="">
</div>

Ratio

Sets the aspect ratio.

<div class="o-ratio o-ratio--1-1">
	<img src="https://placeholdit.com/800x800/1d4ed8/ffffff" alt="">
</div>

<div class="o-ratio o-ratio--4-3">
	<img src="https://placeholdit.com/800x600/1d4ed8/ffffff" alt="">
</div>

<div class="o-ratio o-ratio--16-9">
	<img src="https://placeholdit.com/800x450/1d4ed8/ffffff" alt="">
</div>

<div class="o-ratio o-ratio--21-9">
	<img src="https://placeholdit.com/800x343/1d4ed8/ffffff" alt="">
</div>