CSS: img

.instui-img — एक स्टाइल किया गया <img> जिसमें display, crop, और effect मॉडिफ़ायर होते हैं जो स्टैक होते हैं।

Effects साझा --pantoken-img-filter कस्टम प्रॉपर्टी के माध्यम से संयोजित होते हैं, इसलिए -with-grayscale और -with-blur एक साथ लागू हो सकते हैं; -constrain-* crop मॉडिफ़ायर उपभोक्ता से बॉक्स का आकार स्पष्ट रूप से माँगते हैं।

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	धुंधलापन (blur) प्रभाव लागू करें।
.-with-grayscale	ग्रे-स्केल प्रभाव लागू करें।

कस्टम प्रॉपर्टीज

प्रॉपर्टी	प्रकार	डिफ़ॉल्ट	विवरण
--pantoken-img	—	—	filter <filter-value-list> | none — छवि पर संयोजित CSS फ़िल्टर; effect मॉडिफ़ायर इसे सेट करते हैं, और आप इसे कस्टम फ़िल्टर के लिए ओवरराइड कर सकते हैं।

उपयोग किये गए टोकन

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