Object Position

vel-src: layout.css

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

Class	Properties
vel-object-center	object-position: center
vel-object-top	object-position: top
vel-object-bottom	object-position: bottom
vel-object-left	object-position: left
vel-object-right	object-position: right
vel-object-left-top	object-position: left top
vel-object-right-top	object-position: right top
vel-object-left-bottom	object-position: left bottom
vel-object-right-bottom	object-position: right bottom

Examples

Object position controls which part of an image is visible when cropped

vel-object-top

vel-object-center

vel-object-bottom

vel-object-left

vel-object-right

example.html

<div style="display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-start">
  <div style="text-align:center">
    <div style="width:100px;height:68px;overflow:hidden;border-radius:0.375rem;border:1px solid #1e2d45">
      <div style="width:200px;height:136px;background:#1a2236;object-fit:cover;object-position:top;transform:translateX(0) translateY(0)"></div>
    </div>
    <p style="font-size:0.68rem;color:#64748b;margin-top:0.35rem;font-family:monospace">vel-object-top</p>
  </div><div style="text-align:center">
    <div style="width:100px;height:68px;overflow:hidden;border-radius:0.375rem;border:1px solid #1e2d45">
      <div style="width:200px;height:136px;background:#1a2236;object-fit:cover;object-position:center;transform:translateX(-25%) translateY(-17%)"></div>
    </div>
    <p style="font-size:0.68rem;color:#64748b;margin-top:0.35rem;font-family:monospace">vel-object-center</p>
  </div><div style="text-align:center">
    <div style="width:100px;height:68px;overflow:hidden;border-radius:0.375rem;border:1px solid #1e2d45">
      <div style="width:200px;height:136px;background:#1a2236;object-fit:cover;object-position:bottom;transform:translateX(0) translateY(-50%)"></div>
    </div>
    <p style="font-size:0.68rem;color:#64748b;margin-top:0.35rem;font-family:monospace">vel-object-bottom</p>
  </div><div style="text-align:center">
    <div style="width:100px;height:68px;overflow:hidden;border-radius:0.375rem;border:1px solid #1e2d45">
      <div style="width:200px;height:136px;background:#1a2236;object-fit:cover;object-position:left;transform:translateX(0) translateY(0)"></div>
    </div>
    <p style="font-size:0.68rem;color:#64748b;margin-top:0.35rem;font-family:monospace">vel-object-left</p>
  </div><div style="text-align:center">
    <div style="width:100px;height:68px;overflow:hidden;border-radius:0.375rem;border:1px solid #1e2d45">
      <div style="width:200px;height:136px;background:#1a2236;object-fit:cover;object-position:right;transform:translateX(-50%) translateY(0)"></div>
    </div>
    <p style="font-size:0.68rem;color:#64748b;margin-top:0.35rem;font-family:monospace">vel-object-right</p>
  </div>
</div>

Using vel-object-cover + vel-object-top on an image element

vel-object-top

vel-object-bottom

vel-object-center

example.html

<div style="display:flex;gap:1.5rem;align-items:flex-start">
  <div>
    <div style="width:140px;height:90px;border-radius:0.5rem;border:1px solid #1e2d45;overflow:hidden;background:#7c5cfc"></div>
    <p style="font-size:0.72rem;color:#94a3b8;margin-top:0.5rem;text-align:center;font-family:monospace">vel-object-top</p>
  </div>
  <div>
    <div style="width:140px;height:90px;border-radius:0.5rem;border:1px solid #1e2d45;overflow:hidden;background:#0ecb81"></div>
    <p style="font-size:0.72rem;color:#94a3b8;margin-top:0.5rem;text-align:center;font-family:monospace">vel-object-bottom</p>
  </div>
  <div>
    <div style="width:140px;height:90px;border-radius:0.5rem;border:1px solid #1e2d45;overflow:hidden;background:#f0416c"></div>
    <p style="font-size:0.72rem;color:#94a3b8;margin-top:0.5rem;text-align:center;font-family:monospace">vel-object-center</p>
  </div>
</div>