CSS: img

.instui-img — Görüntüleme, kırpma ve efekt değiştiricileri üst üste binebilen stillendirilmiş bir <img>.

Efektler, paylaşılan --pantoken-img-filter özel özelliği üzerinden bileşikleşir; bu yüzden -with-grayscale ve -with-blur birlikte uygulanabilir; -constrain-* kırpma değiştiricileri tüketicinin kutuyu açıkça boyutlandırmasını gerektirir.

Source: img.css

Erişilebilirlik

Görüntüyü tanımlayan anlamlı bir alt metni sağlayın ve tamamen dekoratif görüntüler için boş bir alt="" kullanın, böylece yardımcı teknolojiler bunları atlar.

Kullanım

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

Örnekler

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

Değiştiriciler

Değiştirici	Açıklama
.-constrain-contain	Kutuya sığacak şekilde ölçeklendir (contain).
.-constrain-cover	Kutuyu dolduracak şekilde ölçeklendir (cover).
.-display-block	Blok öğe olarak göster.
.-with-blur	Bulanıklık efekti uygula.
.-with-grayscale	Gri tonlama efekti uygula.

Özel özellikler

Özellik	Tür	Varsayılan	Açıklama
--pantoken-img	—	—	filter <filter-value-list> | none — Görüntü üzerindeki bileşik CSS filtresi; efekt değiştiricileri bunu ayarlar ve özel bir filtre için üzerine yazabilirsiniz.

Tüketilen tokenler

Token	Tür	Değer
--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