CSS: img

.instui-img — Stiliziran <img> z modifikatorji prikaza, obrezovanja in učinkov, ki se združujejo.

Učinki se združujejo prek skupne lastnosti po meri --pantoken-img-filter, zato lahko -with-grayscale in -with-blur delujeta skupaj; modifikatorji obrezovanja -constrain-* zahtevajo, da uporabnik izrecno nastavi velikost polja.

Source: img.css

Dostopnost

Zagotovite smiselno besedilo alt, ki opisuje sliko, in uporabite prazen alt="" za povsem dekorativne slike, da jih asistivna tehnologija preskoči.

Uporaba

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

Primeri

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

Spremenljivke (modifikatorji)

Modifikator	Opis
.-constrain-contain	Prilagodite velikost, da se prilega v polje (contain).
.-constrain-cover	Prilagodite velikost, da zapolni polje (cover).
.-display-block	Prikaži kot blokovni element.
.-with-blur	Uporabi zameglitveni učinek.
.-with-grayscale	Uporabi učinek v sivinskih tonih.

Lastnosti po meri

Lastnost	Tip	Privzeto	Opis
--pantoken-img	—	—	filter <filter-value-list> | none — Sestavljen CSS filter na sliki; modifikatorji učinkov ga določijo, lahko pa ga preglasite z lastnim filtrom.

Porabljeni žetoni

Token	Tip	Vrednost
--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