Object Fit

Kawal bagaimana kandungan media muat dalam bekasnya

Sintaks

layout="object:[value]"

Nilai

Nilai	CSS Output	Huraian
contain	object-fit: contain	Skala untuk muat, kekalkan nisbah
cover	object-fit: cover	Tutup bekas, mungkin dipotong
fill	object-fit: fill	Regang untuk mengisi
none	object-fit: none	Tiada penskalaan
scale-down	object-fit: scale-down	Lebih kecil antara tiada atau kandung

Contoh

<img layout="object:cover">Cover image</img>

Pratonton

Objek Muat Tutup

layout="object:cover" - Imej menutup bekas, mungkin dipotong

object:cover

Lihat Kod

<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div style="width: 80px; height: 60px;" visual="bg:neutral-300 rounded:small" layout="overflow:hidden">
    <div layout="object:cover" style="width: 100%; height: 100%;" visual="bg:primary"></div>
  </div>
  <span layout="flex center" visual="text:neutral-600 dark:text:neutral-400">object:cover</span>
</div>

Objek Muat Kandung

layout="object:contain" - Imej muat di dalam, kekalkan nisbah

object:contain

Lihat Kod

<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div style="width: 80px; height: 60px;" visual="bg:neutral-300 rounded:small" layout="flex center">
    <div layout="object:contain" style="width: 60%; height: 60%;" visual="bg:primary rounded:small"></div>
  </div>
  <span layout="flex center" visual="text:neutral-600 dark:text:neutral-400">object:contain</span>
</div>