CSS: img

.instui-img — Стилізований <img> з модифікаторами display, crop та effect, які накладаються.

Ефекти комбінуються через спільну користувацьку властивість --pantoken-img-filter, тому -with-grayscale і -with-blur можуть застосовуватися разом; модифікатори обрізки -constrain-* вимагають від споживача явного задання розміру блока.

Source: img.css

Доступність

Надайте осмислений текст alt, який описує зображення, а для суто декоративних зображень використовуйте порожній alt="", щоб допоміжні технології їх пропускали.

Використання

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

Приклади

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

Модифікатори

Модифікатор	Опис
.-constrain-contain	Масштабує, щоб вписатися в рамку (contain).
.-constrain-cover	Масштабує, щоб заповнити рамку (cover).
.-display-block	Відображати як блочний елемент.
.-with-blur	Застосувати ефект розмиття.
.-with-grayscale	Застосувати ефект відтінків сірого.

Користувацькі властивості

Властивість	Тип	За замовчуванням	Опис
--pantoken-img	—	—	filter <filter-value-list> | none — Складений CSS-фільтр на зображенні; модифікатори ефектів його задають, і ви можете перевизначити його для власного фільтра.

Використано токенів

Token	Тип	Значення
--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