CSS: img

.instui-img — стилизованный <img> с модификаторами отображения, обрезки и эффекта, которые накладываются друг на друга.

Эффекты комбинируются через общую настраиваемую переменную --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