CSS: img

.instui-img — En stylad <img> med display-, crop- och effektmodifierare som staplas.

Effekter komponeras via den delade --pantoken-img-filter-egenskapen, så -with-grayscale och -with-blur kan tillämpas tillsammans; -constrain-* crop-modifierare kräver att konsumenten anger boxens storlek uttryckligen.

Source: img.css

Tillgänglighet

Ge meningsfull alt-text som beskriver bilden, och använd en tom alt="" för rent dekorativa bilder så att hjälpmedel hoppar över dem.

Användning

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

Exempel

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

Modifierare

Modifierare	Beskrivning
.-constrain-contain	Skala för att passa inom boxen (contain).
.-constrain-cover	Skala för att fylla boxen (cover).
.-display-block	Visa som ett blockelement.
.-with-blur	Tillämpa en oskärpeeffekt.
.-with-grayscale	Tillämpa en gråskaleeffekt.

Anpassade egenskaper

Egenskap	Typ	Standard	Beskrivning
--pantoken-img	—	—	filter <filter-value-list> | none — Det sammansatta CSS-filtret på bilden; effektmodifierarna sätter det, och du kan åsidosätta det för ett anpassat filter.

Förbrukade tokens

Token	Typ	Värde
--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