Aspect ratio 宽高比

<div class="pvs-grid" style="--pvs-grid-columns:2;--pvs-gap:1rem;max-width:32rem">
  <div class="pvs-aspect-square pvs-bg-surface pvs-border pvs-flex pvs-items-center pvs-justify-center">
    <code>square</code>
  </div>
  <div class="pvs-aspect-video pvs-bg-surface pvs-border pvs-flex pvs-items-center pvs-justify-center">
    <code>video 16:9</code>
  </div>
</div>

<div class="pvs-aspect-video pvs-max-w-xs pvs-border pvs-overflow-hidden pvs-bg-surface-muted">
  <img class="pvs-w-full pvs-h-full pvs-object-cover" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180'%3E%3Crect fill='%2394a3b8' width='100%25' height='100%25'/%3E%3Ctext x='50%25' y='50%25' fill='%23fff' text-anchor='middle' dy='.3em' font-size='14'%3E16:9%3C/text%3E%3C/svg%3E" alt="" />
</div>

<article class="pvs-card pvs-max-w-xs">
  <div class="pvs-aspect-square pvs-bg-surface-muted pvs-border-b">
  </div>
  <div class="pvs-card__body">
    <p class="pvs-m-0 pvs-text-sm">方图占位 + 正文</p>
  </div>
</article>

<div class="pvs-aspect-auto pvs-p-4 pvs-border">pvs-aspect-auto 随内容高度</div>

<div class="pvs-aspect-square md:pvs-aspect-video pvs-border pvs-p-4 pvs-bg-surface-muted pvs-max-w-xs">
  <code>方 → md 16:9</code>
</div>