CSS: img

.instui-img — Stylizowany <img> z modyfikatorami wyświetlania, przycinania i efektów, które się nakładają.

Efekty komponują się poprzez wspólną niestandardową właściwość --pantoken-img-filter, więc -with-grayscale i -with-blur mogą być stosowane razem; modyfikatory przycinania -constrain-* wymagają, aby konsument jawnie ustawił rozmiar pudełka.

Source: img.css

Dostępność

Podaj sensowny tekst alt opisujący obraz i użyj pustego alt="" dla obrazów czysto dekoracyjnych, aby technologie asystujące je pominęły.

Użycie

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

Przykłady

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

Modyfikatory

Modyfikator	Opis
.-constrain-contain	Dopasuj skalę, aby zmieścić się w pudełku (contain).
.-constrain-cover	Skaluj, aby wypełnić pudełko (cover).
.-display-block	Wyświetl jako element blokowy.
.-with-blur	Zastosuj efekt rozmycia.
.-with-grayscale	Zastosuj efekt odcieni szarości.

Własne właściwości

Właściwość	Typ	Domyślny	Opis
--pantoken-img	—	—	filter <filter-value-list> | none — Skomponowany filtr CSS na obrazie; modyfikatory efektów go ustawiają, a możesz go nadpisać, by użyć niestandardowego filtra.

Zużyte tokeny

Token	Typ	Wartość
--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