CSS: img

.instui-img — A styled <img> with display, crop, and effect modifiers that stack.

Les effets se composent via la propriété personnalisée partagée --pantoken-img-filter, donc -with-grayscale et -with-blur peuvent s'appliquer ensemble ; les modificateurs de recadrage -constrain-* exigent que le consommateur spécifie explicitement la taille de la boîte.

Source: img.css

Accessibilité

Fournir un texte alt significatif qui décrit l'image, et utiliser un alt="" vide pour les images purement décoratives afin que les technologies d'assistance les ignorent.

Utilisation

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

Exemples

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

Modificateurs

Modificateur	Description
.-constrain-contain	Redimensionner pour tenir dans la boîte (contain).
.-constrain-cover	Redimensionner pour remplir la boîte (cover).
.-display-block	Afficher comme un élément de type block.
.-with-blur	Appliquer un effet de flou.
.-with-grayscale	Appliquer un effet en niveaux de gris.

Propriétés personnalisées

Propriété	Type	Défaut	Description
--pantoken-img	—	—	filter <filter-value-list> | none — Le filtre CSS composé sur l'image ; les modificateurs d'effet le définissent, et vous pouvez le remplacer pour un filtre personnalisé.

Jetons consommés

Token	Type	Valeur
--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