布局

Object fit 填充

媒体元素在固定框内的填充；常配合 pvs-aspect-*。

cover 裁切铺满

竖图在方框内 cover

<div class="pvs-flex pvs-gap-4">
  <div class="pvs-w-28 pvs-aspect-square 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='80' height='120'%3E%3Crect fill='%232563eb' width='100%25' height='100%25'/%3E%3C/svg%3E" alt="" />
  </div>
  <p class="pvs-m-0 pvs-text-sm pvs-text-muted pvs-self-center">竖图在方框内 cover</p>
</div>

contain 完整显示

<div class="pvs-w-28 pvs-aspect-video pvs-border pvs-overflow-hidden pvs-bg-surface-muted">
  <img class="pvs-w-full pvs-h-full pvs-object-contain" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Crect fill='%2364748b' width='100%25' height='100%25'/%3E%3C/svg%3E" alt="" />
</div>

配合宽高比

<div class="pvs-aspect-video pvs-max-w-xs pvs-border pvs-overflow-hidden">
  <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='%23cbd5e1' width='100%25' height='100%25'/%3E%3C/svg%3E" alt="" />
</div>

fill / none

fill

none

<div class="pvs-flex pvs-gap-3 pvs-text-xs">
  <div class="pvs-w-20 pvs-h-16 pvs-border pvs-overflow-hidden pvs-bg-surface-muted pvs-flex pvs-items-center pvs-justify-center">
    <code>fill</code>
  </div>
  <div class="pvs-w-20 pvs-h-16 pvs-border pvs-flex pvs-items-center pvs-justify-center">
    <code>none</code>
  </div>
</div>

响应式

移动优先；在类名前加 sm: md: lg: xl:，仅在该断点及以上生效。详见响应式。

<img class="pvs-w-32 pvs-aspect-video pvs-object-cover md:pvs-object-contain pvs-border pvs-bg-surface-muted" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Crect fill='%23cbd5e1' width='100%25' height='100%25'/%3E%3C/svg%3E" alt="" />

类名速查

类	样式
`pvs-object-cover`	cover
`pvs-object-contain`	contain
`pvs-object-fill`	fill
`pvs-object-none`	none