Docs / Object Fit

Object Fit

vel-src: layout.css

Utilities for controlling how a replaced element's content should be resized.

ClassProperties
vel-object-containobject-fit: contain
vel-object-coverobject-fit: cover
vel-object-fillobject-fit: fill
vel-object-noneobject-fit: none
vel-object-scale-downobject-fit: scale-down

Examples

Object fit variants

vel-object-cover

vel-object-contain

example.html
<div class="vel-flex vel-gap-4">
  <div>
    <p style="color:#64748b;font-size:11px;margin-bottom:4px">vel-object-cover</p>
    <div style="width:100px;height:80px;background:#1a2236;border:1px solid #1e2d45;border-radius:6px;overflow:hidden">
      <div class="vel-object-cover" style="width:100%;height:100%;background:#7c5cfc"></div>
    </div>
  </div>
  <div>
    <p style="color:#64748b;font-size:11px;margin-bottom:4px">vel-object-contain</p>
    <div style="width:100px;height:80px;background:#1a2236;border:1px solid #1e2d45;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center">
      <div style="width:60px;height:40px;background:#0ecb81;border-radius:4px"></div>
    </div>
  </div>
</div>