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