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