CSS: img

.instui-img — Egy stílusozott <img> elem, amely megjelenítési, vágási és effekt módosítókat tartalmaz, amelyek egymásra halmozódnak.

A hatások a közös --pantoken-img-filter egyéni tulajdonságon keresztül kombinálódnak, így a -with-grayscale és a -with-blur egyszerre is alkalmazható; a -constrain-* vágó módosítók megkövetelik, hogy a fogyasztó explicit módon állítsa be a doboz méretét.

Source: img.css

Hozzáférhetőség

Adj meg értelmes alt szöveget, amely leírja a képet, és használj üres alt=""-t kizárólag díszítő jellegű képeknél, hogy a segédeszközök átugorják azokat.

Használat

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

Példák

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

Módosítók

Módosító	Leírás
.-constrain-contain	Méretezze úgy, hogy a dobozba illeszkedjen (contain).
.-constrain-cover	Méretezés a doboz kitöltéséhez (cover).
.-display-block	Blokk elemként jelenítse meg.
.-with-blur	Alkalmazzon elmosódási hatást.
.-with-grayscale	Alkalmazzon szürkeárnyalatos hatást.

Egyéni tulajdonságok

Tulajdonság	Típus	Alapértelmezett	Leírás
--pantoken-img	—	—	filter <filter-value-list>

Fogyasztott tokenek

Token	Típus	Érték
--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