CSS: img

.instui-img — Sebuah <img> yang bergaya dengan modifikator tampilan, pemotongan, dan efek yang dapat ditumpuk.

Efek disusun melalui properti kustom bersama --pantoken-img-filter, sehingga -with-grayscale dan -with-blur dapat diterapkan bersama; modifikator pemotongan -constrain-* mengharuskan konsumen mengatur ukuran kotak secara eksplisit.

Source: img.css

Aksesibilitas

Berikan teks alt yang bermakna yang menggambarkan gambar, dan gunakan alt="" kosong untuk gambar yang murni dekoratif agar teknologi bantu mengabaikannya.

Penggunaan

@import "@pantoken/components/components.css";
@import "@pantoken/components/img.css";

Contoh

<img class="instui-img" alt="Gradient">

Modifikator

Modifikator	Deskripsi
.-constrain-contain	Skalakan agar muat di dalam kotak (contain).
.-constrain-cover	Skalakan agar mengisi kotak (cover).
.-display-block	Tampilkan sebagai elemen blok.
.-with-blur	Terapkan efek blur.
.-with-grayscale	Terapkan efek skala abu-abu.

Properti khusus

Properti	Tipe	Bawaan	Deskripsi
--pantoken-img	—	—	filter <filter-value-list> | none — Filter CSS yang tersusun pada gambar; modifikator efek yang menentukannya, dan Anda dapat menimpanya untuk filter kustom.

Token yang digunakan

Token	Tipe	Nilai
--instui-component-img-effect-transition-duration	<time>	1s
--instui-component-img-image-blur-amount	<length>	0.25em
--pantoken-img-filter	none | <filter-value-list> | <-ms-filter-function-list>	none