Image 图片

<img class="pvs-img pvs-img--fluid pvs-border" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='120'%3E%3Crect fill='%23e2e8f0' width='100%25' height='100%25'/%3E%3C/svg%3E" alt="响应式示例" style="max-width:16rem" />

<div class="pvs-cluster pvs-items-center">
  <img class="pvs-img pvs-img--thumb pvs-img--rounded pvs-img--border" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Crect fill='%2394a3b8' width='100%25' height='100%25'/%3E%3C/svg%3E" alt="" />
  <img class="pvs-img pvs-img--thumb-lg pvs-img--rounded-full pvs-img--border" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='112'%3E%3Crect fill='%232563eb' width='100%25' height='100%25'/%3E%3C/svg%3E" alt="" />
</div>

<div class="pvs-flex pvs-gap-4 pvs-flex-wrap">
  <div class="pvs-aspect-video pvs-w-32 pvs-border pvs-overflow-hidden">
    <img class="pvs-img pvs-img--cover pvs-w-full pvs-h-full" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='120'%3E%3Crect fill='%23cbd5e1' width='100%25' height='100%25'/%3E%3C/svg%3E" alt="cover" />
  </div>
  <div class="pvs-aspect-video pvs-w-32 pvs-border pvs-overflow-hidden pvs-bg-surface-muted">
    <img class="pvs-img pvs-img--contain pvs-w-full pvs-h-full" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='120'%3E%3Crect fill='%232563eb' width='60%25' height='60%25' x='20%25' y='20%25'/%3E%3C/svg%3E" alt="contain" />
  </div>
</div>

<figure class="pvs-figure" style="max-width:16rem">
  <img class="pvs-img pvs-img--rounded pvs-img--border" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180'%3E%3Crect fill='%23e2e8f0' width='100%25' height='100%25'/%3E%3C/svg%3E" alt="" />
  <figcaption class="pvs-figure__caption">图 1：封面示意</figcaption>
</figure>