CSS: img

.instui-img — Een gestileerde <img> met display-, crop- en effect-modifiers die op elkaar stapelen.

Effecten worden samengesteld via de gedeelde --pantoken-img-filter custom property, dus -with-grayscale en -with-blur kunnen samen toegepast worden; de -constrain-* crop-modifiers vereisen dat de consument de box expliciet van grootte voorziet.

Source: img.css

Toegankelijkheid

Geef zinvolle alt-tekst die de afbeelding beschrijft, en gebruik een lege alt="" voor puur decoratieve afbeeldingen zodat assistieve technologie ze overslaat.

Gebruik

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

Voorbeelden

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

Modifiers

Modifier	Beschrijving
.-constrain-contain	Schaal zodat het binnen de box past (contain).
.-constrain-cover	Schaal zodat het de box vult (cover).
.-display-block	Weergeven als een block-element.
.-with-blur	Pas een blur-effect toe.
.-with-grayscale	Pas een grijswaarden-effect toe.

Aangepaste eigenschappen

Eigenschap	Type	Standaard	Beschrijving
--pantoken-img	—	—	filter <filter-value-list> | none — De samengestelde CSS-filter op de afbeelding; de effect-modifiers stellen deze in, en je kunt deze overschrijven voor een aangepast filter.

Gebruikte tokens

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