CSS: img ​

.instui-img — Un <img> estilizado con modificadores de visualización, recorte y efecto que se apilan.

Los efectos se componen a través de la propiedad personalizada compartida --pantoken-img-filter, por lo que -with-grayscale y -with-blur pueden aplicarse juntos; los modificadores de recorte -constrain-* requieren que el consumidor dimensione explícitamente la caja.

Source: img.css

Accesibilidad ​

Proporcione texto alt significativo que describa la imagen, y use un alt="" vacío para imágenes puramente decorativas para que la tecnología de asistencia las omita.

Uso ​

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

Ejemplos ​

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

Modificadores ​

ModificadorDescripción
.-constrain-containEscalar para ajustarse dentro de la caja (contain).
.-constrain-coverEscalar para rellenar la caja (cover).
.-display-blockMostrarse como un elemento de bloque.
.-with-blurAplicar un efecto de desenfoque.
.-with-grayscaleAplicar un efecto de escala de grises.

Propiedades personalizadas ​

PropiedadTipoPredeterminadoDescripción
--pantoken-img——filter <filter-value-list> | none — El filtro CSS compuesto en la imagen; los modificadores de efecto lo establecen, y puedes sobrescribirlo para un filtro personalizado.

Tokens consumidos ​

TokenTipoValor
--instui-component-img-effect-transition-duration<time>1s
--instui-component-img-image-blur-amount<length>0.25em
--pantoken-img-filternone | <filter-value-list> | <-ms-filter-function-list>none