Aspect Ratio

vel-src: layout.css

Utilities for controlling the aspect ratio of an element.

Class	Properties
vel-aspect-auto	aspect-ratio: auto
vel-aspect-square	aspect-ratio: 1 / 1
vel-aspect-video	aspect-ratio: 16 / 9

Examples

Aspect ratio boxes

vel-aspect-square

vel-aspect-video

example.html

<div class="vel-flex vel-gap-4 vel-items-end">
  <div>
    <p style="color:#64748b;font-size:11px;margin-bottom:4px">vel-aspect-square</p>
    <div class="vel-aspect-square" style="width:80px;background:#7c5cfc;border-radius:8px"></div>
  </div>
  <div>
    <p style="color:#64748b;font-size:11px;margin-bottom:4px">vel-aspect-video</p>
    <div class="vel-aspect-video" style="width:160px;background:#0ecb81;border-radius:8px"></div>
  </div>
</div>