Components · Image

组件

Image 图片

响应式图片、缩略图、object-fit 与 figure 说明。

响应式

响应式示例
<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>

图片填充

cover
contain
<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>

图文

图 1:封面示意
<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>

类名速查

类名说明
pvs-img / pvs-img--fluid响应式 max-width:100%
pvs-img--thumb / --thumb-lg方形缩略图
pvs-img--cover / --containobject-fit
pvs-img--rounded / --rounded-full圆角 / 圆形
pvs-img--border边框
pvs-figure + __caption带说明的图片