Εάν μια εικόνα είναι ευρύτερη από τη στήλη του κύριου περιεχομένου—όπως συμβαίνει συχνά σε μικρότερες οθόνες—το DevSite την περιορίζει αυτόματα στο πλάτος της στήλης. Ωστόσο, εάν η εικόνα έχει οριστεί και τα χαρακτηριστικά width και height , αλλάζει το μέγεθος μόνο του πλάτους, προκαλώντας παραμόρφωση της εικόνας. Συνεπώς, μην ορίζετε το height της εικόνας. Αυτό σημαίνει ότι η σελίδα μπορεί να επανασχεδιαστεί εάν η εικόνα αργεί να φορτώσει (προκαλώντας άλμα), αλλά αυτό είναι καλύτερο από μια εικόνα που δεν χωράει στην οθόνη.
Μπορείτε να εφαρμόσετε class="screenshot" σε μια εικόνα για να της δώσετε ένα περίγραμμα που την αντισταθμίζει από το κοντινό κείμενο. Αυτό χρησιμοποιείται συνήθως για στιγμιότυπα οθόνης που έχουν λευκό φόντο και διαφορετικά χάνονται στη σελίδα. Μην το χρησιμοποιείτε για εικόνες που δεν το χρειάζονται.
Κυμαινόμενο δίπλα στο κείμενο
Η εικόνα στα δεξιά έχει επίσης class="attempt-right" , η οποία επιπλέει την εικόνα ακριβώς σε μεγαλύτερες οθόνες, αλλά αναγκάζει την εικόνα σε κάθετη διάταξη σε μικρότερες οθόνες, tablet και μικρότερες, όπου η αιώρηση δεξιά θα προκαλούσε προβλήματα. Διατίθεται επίσης class="attempt-left" . Για να χρησιμοποιήσετε μαζί attempt-left και attempt-right , βεβαιωθείτε ότι το στοιχείο attempt-left είναι πρώτο.
Όταν οι εικόνες αιωρούνται, δεν μπορούν να υπερβαίνουν το 50% του πλάτους της στήλης. Εάν το έκαναν, αναβαθμίζονται.
<img src="/path/to/image.png" alt="Alert dialog"
class="screenshot attempt-right">
Μπορείτε να χρησιμοποιήσετε τις ίδιες κλάσεις για να μετακινήσετε άλλα στοιχεία, όπως ένα <figure> που περιέχει και μια εικόνα και μια λεζάντα:
<figure class="attempt-right">
<img src="/path/to/image.png" alt="Alert dialog" class="screenshot">
<figcaption><b>Figure 1</b>: Alert dialog</figcaption>
</figure>
Εκκαθάριση μετακινούμενου κειμένου
Για να αποτρέψετε την αναδίπλωση του κειμένου γύρω από ένα αιωρούμενο στοιχείο και την εμφάνιση στο εγγενές του πλάτος, μπορείτε να προσθέσετε μια clear κλάση στα επηρεαζόμενα στοιχεία που ακολουθούν το αιωρούμενο στοιχείο.
<p class="clear">Hello world.</p>
Παράδειγμα με τη σαφή τάξη
Σε αυτό το παράδειγμα, η δεύτερη παράγραφος περιλαμβάνει μια clear κατηγορία.
Αυτή η παράγραφος αναδιπλώνεται γύρω από την κινούμενη εικόνα . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Αυτή η παράγραφος έχει μια καθαρή κλάση και δεν τυλίγεται γύρω από την κινούμενη εικόνα . Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Παράδειγμα χωρίς τη σαφή τάξη
Σε αυτό το παράδειγμα, και οι δύο παράγραφοι τυλίγονται γύρω από την κινούμενη εικόνα.
Αυτή η παράγραφος αναδιπλώνεται γύρω από την κινούμενη εικόνα . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Αυτή η παράγραφος αναδιπλώνεται γύρω από την κινούμενη εικόνα . Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Εικόνες με σκούρο θέμα
Το DevSite παρέχει ένα μικρό σύνολο ονομάτων κλάσεων που μπορούν να εφαρμοστούν σε εικόνες για να τροποποιήσουν την εμφάνισή τους όταν είναι ενεργοποιημένο το σκούρο θέμα.
Σκούραση εικόνας
Από προεπιλογή, όλες οι εικόνες εκτός από τα αρχεία SVG είναι ελαφρώς σκουρόχρωμες σε σκούρο θέμα.
Για να αφαιρέσετε το προεπιλεγμένο σκούρο από μια εικόνα όταν είναι ενεργοποιημένο το σκούρο θέμα, προσθέστε μια κλάση χωρίς φίλτρο στην εικόνα:
<img src="/path/to/image.jpg" class="no-filter" alt="">
Αντιστροφή εικόνας
Για εικόνες με μαύρη ή σκούρα μονόχρωμη παλέτα χρωμάτων, προσθέστε μια κλάση invert στην εικόνα για να εμφανιστεί λευκό/ανοιχτό σε σκούρο θέμα:
<img src="/site-assets/logo-github.png" class="invert" alt="">
Για μια σελίδα _index.yaml , προσθέστε invert στο πεδίο classname για ένα στοιχείο σειράς:
- items:
- classname: invert
icon:
path: /site-assets/logo-github.png
Ξεχωριστή εικόνα παραλλαγής σκούρου θέματος
Εάν θέλετε να παρέχετε μια ξεχωριστή εικόνα που εμφανίζεται μόνο όταν είναι ενεργοποιημένο το σκούρο θέμα, τυλίξτε το υπάρχον στοιχείο <img> σε ένα στοιχείο <picture> και προσθέστε ένα στοιχείο <source> για την παραλλαγή σκούρου θέματος.
Στο παρακάτω παράδειγμα, υπάρχουν δύο αρχεία SVG για το λεκτικό σήμα Google μέσα σε ένα στοιχείο <picture> . Όταν το σκούρο θέμα είναι απενεργοποιημένο, εμφανίζεται το αρχείο εικόνας στο στοιχείο <img> , εμφανίζοντας το λεκτικό σήμα με τα τέσσερα χρώματα της επωνυμίας Google. Όταν είναι ενεργοποιημένο το σκούρο θέμα, εμφανίζεται το αρχείο εικόνας στο στοιχείο <source> , όπου το λεκτικό σήμα είναι εξ ολοκλήρου λευκό και δεν έχει χρώματα επωνυμίας.
Παράδειγμα
Κώδικας
<picture>
<source
srcset="/devsite/images/google-dark-theme.svg"
media="(prefers-color-scheme: dark)"
class="devsite-dark-theme"
alt="">
<img src="/devsite/images/google.svg" alt="">
</picture>
Σημειώσεις
Επειδή το σκοτεινό θέμα είναι ενεργοποιημένο πίσω από μια σημαία δυνατότητας, σημειώστε τα ακόλουθα σχετικά με τα χαρακτηριστικά του στοιχείου <source> :
Το στοιχείο <source> πρέπει να περιλαμβάνει μια κλάση devsite-dark-theme , η οποία παρέχει ένα άγκιστρο για το frontend του DevSite για την ενημέρωση του χαρακτηριστικού πολυμέσων και της τιμής του ανάλογα με την επιλογή σκούρου θέματος που έχει επιλέξει ο χρήστης: light , dark ή device . Το χαρακτηριστικό μέσου πρέπει να περιλαμβάνει ένα ερώτημα πολυμέσων (prefers-color-scheme: dark) στην τιμή του. Εάν έχετε ήδη στοιχεία <source> με ερωτήματα media στο χαρακτηριστικό media, είτε προσθέστε τα υπάρχοντα ερωτήματα μέσων με και (prefers-color-scheme: dark) είτε προσθέστε ένα νέο στοιχείο <source> του οποίου η τιμή χαρακτηριστικού μέσου είναι (prefers-color-scheme: dark) . Το ερώτημα media και η τιμή του θα αφαιρεθούν ή θα αντικατασταθούν ανάλογα με την επιλογή σκούρου θέματος που έχει επιλέξει ο χρήστης. Ενώ το όνομα αρχείου της εικόνας παραλλαγής σκούρου θέματος στο χαρακτηριστικό srcset μπορεί τεχνικά να είναι οτιδήποτε, συνιστάται η προσθήκη -dark-theme στο όνομα αρχείου της υπάρχουσας εικόνας.