CSS: img

.instui-img — En styllet <img> med visnings-, beskærings- og effekt-modifikatorer, der kan stables.

Effekter komponeres via den delte --pantoken-img-filter-egenskab, så -with-grayscale og -with-blur kan anvendes sammen; -constrain-*-beskæringsmodifikatorerne kræver, at forbrugeren angiver boksens størrelse eksplicit.

Source: img.css

Tilgængelighed

Giv meningsfuld alt-tekst, der beskriver billedet, og brug en tom alt="" for rent dekorative billeder, så hjælpeteknologi springer dem over.

Brug

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

Eksempler

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

Modifikatorer

Modifikator	Beskrivelse
.-constrain-contain	Skaler, så det passer inden for boksen (contain).
.-constrain-cover	Skaler for at udfylde boksen (cover).
.-display-block	Vis som et blok-element.
.-with-blur	Anvend en sløringseffekt.
.-with-grayscale	Anvend en gråtoneeffekt.

Brugerdefinerede egenskaber

Egenskab	Type	Standard	Beskrivelse
--pantoken-img	—	—	filter <filter-value-list> | none — Det sammensatte CSS-filter på billedet; effekt-modifikatorerne sætter det, og du kan tilsidesætte det for et brugerdefineret filter.

Forbrugte tokens

Token	Type	Værdi
--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