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