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	Εμφάνιση ως στοιχείο block.
.-with-blur	Εφαρμόστε εφέ θολώματος.
.-with-grayscale	Εφαρμόστε εφέ ασπρόμαυρου.

Προσαρμοσμένες ιδιότητες

Ιδιότητα	Τύπος	Προεπιλογή	Περιγραφή
--pantoken-img	—	—	filter <filter-value-list> | none — Το συντιθέμενο CSS φίλτρο στην εικόνα· οι τροποποιητές εφέ το ορίζουν, και μπορείτε να το παρακάμψετε για ένα προσαρμοσμένο φίλτρο.

Καταναλωμένα tokens

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