1. 首页
  2. 表单 Form
  3. form-image 图片输入

表单 · form-image 图片输入

图片字段容器 form-image：内置占位底图（image-default）、object-fit 五种裁切、纵横比（1x1…9x16）、圆形 / 圆角、hover 遮罩控制器与缩放动画。图片默认限宽 200px、最小 4rem。
表单家族 索引 base input textarea select number search checkbox radio switch choose multipled labels inpselect button label file files upload video image images imgurls date datetime color price sms sign listing json arrays infinite location latlng editor richtext line modifier data 本页内容 占位底图 image-default object-fit 裁切 纵横比与圆角 圆形 image-circle hover 遮罩与控制器 缩放动画 image-animate

占位底图 image-default

<div class="form-image image-default"></div>

object-fit 裁切

cover
contain
fill
<div class="form-image image-fit-cover image-16x9"><img src="..." alt="cover"></div> <div class="form-image image-fit-contain image-16x9"><img src="..." alt="contain"></div> <div class="form-image image-fit-fill image-16x9"><img src="..." alt="fill"></div>

纵横比与圆角

1x1
4x3
16x9 radius
<div class="form-image image-1x1"><img src="..."></div> <div class="form-image image-4x3"><img src="..."></div> <div class="form-image image-16x9 image-radius-8"><img src="..."></div>

圆形 image-circle

circle
<div class="form-image image-circle"><img src="..." alt="circle"></div>

hover 遮罩与控制器

mask
更换封面 删除
<div class="form-image image-16x9"> <img src="..."> <div class="image-mask mask-light"></div> <div class="image-controller"><span class="label label-canclick">更换封面</span></div> </div>

缩放动画 image-animate

animate
<div class="form-image image-animate image-4x3"><img src="..." alt="animate"></div>
提示： 其余修饰 image-sign（1px 边框）、image-border（主色内描边）、image-inline（inline-grid 并排）、image-control-h（横向撑满）可在卡片内组合使用，详见表单索引。
上一张 form-video 视频输入
下一张 form-images 图集
KuoqiUI v2.00 · 离线静态文档 · 界面基于 KuoqiUI · 返回首页