CSS: img

.instui-img — Un <img> amb estil amb modificadors de visualització, retall i efecte que s'apilen.

Els efectes es composen mitjançant la propietat personalitzada compartida --pantoken-img-filter, de manera que -with-grayscale i -with-blur poden aplicar-se conjuntament; els modificadors de retall -constrain-* requereixen que el consumidor dimensioni la caixa explícitament.

Source: img.css

Accessibilitat

Proporcioneu text alt significatiu que descrigui la imatge, i utilitzeu un alt="" buit per a imatges purament decoratives perquè la tecnologia d'assistència les ignori.

Ús

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

Exemples

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

Modificadors

Modificador	Descripció
.-constrain-contain	Escalar per ajustar-se dins la caixa (contain).
.-constrain-cover	Escalar per omplir la caixa (cover).
.-display-block	Mostrar com a element de bloc.
.-with-blur	Aplicar un efecte de desenfocament.
.-with-grayscale	Aplicar un efecte en tons de gris.

Propietats personalitzades

Propietat	Tipus	Predeterminat	Descripció
--pantoken-img	—	—	filter <filter-value-list> | none — El filtre CSS compost sobre la imatge; els modificadors d'efecte l'estableixen, i el podeu sobreescriure per a un filtre personalitzat.

Tokens consumits

Token	Tipus	Valor
--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