Στο Tailwind, ο λόγος διαστάσεων είναι η αναλογία του πλάτους προς το ύψος ενός στοιχείου, όπως ένα βίντεο ή μια εικόνα. Το Tailwind CSS εισήγαγε εγγενή υποστήριξη για βοηθητικά προγράμματα αναλογίας διαστάσεων, τα οποία χρησιμοποιούν την ιδιότητα αναλογίας διαστάσεων CSS για να ορίσουν την επιθυμητή αναλογία διαστάσεων για ένα στοιχείο. Ωστόσο, αυτή η ιδιότητα δεν υποστηρίζεται σε παλαιότερα προγράμματα περιήγησης. Επομένως, οι χρήστες μπορούν να χρησιμοποιήσουν την προσθήκη αναλογίας διαστάσεων για να υποστηρίξουν αυτά τα προγράμματα περιήγησης. Αυτό το πρόσθετο εισάγει δύο τάξεις, π.χ., ' aspect-w-{n} ' και ' aspect-h-{n} ”, το οποίο μπορεί να συνδυαστεί για να δώσει σε ένα στοιχείο μια σταθερή αναλογία διαστάσεων.
Αυτό το άρθρο θα εξηγήσει τη μέθοδο ορισμού της προσθήκης αναλογίας διαστάσεων στο Tailwind.
Πώς να ορίσετε την προσθήκη αναλογίας διαστάσεων στο Tailwind CSS;
Για να ορίσετε την προσθήκη αναλογίας διαστάσεων στο Tailwind, δείτε τα παρακάτω βήματα:
- Εγκαταστήστε την προσθήκη αναλογίας διαστάσεων στο έργο
- Προσθέστε την προσθήκη αναλογίας διαστάσεων στο αρχείο 'tailwind.config.js' και απενεργοποιήστε το ' άποψη ” βασικό πρόσθετο
- Χρησιμοποιήστε τις κλάσεις προσθηκών αναλογίας διαστάσεων στο πρόγραμμα HTML
- Επαληθεύστε την έξοδο προβάλλοντας την ιστοσελίδα HTML
Βήμα 1: Εγκαταστήστε την προσθήκη αναλογίας διαστάσεων στο Tailwind Project
Αρχικά, ανοίξτε το τερματικό και εκτελέστε την παρακάτω εντολή για να εγκαταστήσετε την προσθήκη αναλογίας διαστάσεων στο έργο:
asl και @ ουραίος άνεμος / αναλογία απεικόνισης
Βήμα 2: Διαμόρφωση της προσθήκης αναλογίας διαστάσεων στο αρχείο διαμόρφωσης Tailwind
Στη συνέχεια, ανοίξτε το αρχείο 'tailwind.config.js', προσθέστε το πρόσθετο αναλογίας διαστάσεων σε αυτό και απενεργοποιήστε το ' άποψη ” βασικό πρόσθετο για την αποφυγή τυχόν διενέξεων:
module.εξαγωγές = {περιεχόμενο: [ './index.html' ] ,
corePlugins: {
αναλογία απεικόνισης: ψευδής ,
} ,
πρόσθετα: [
απαιτώ ( '@tailwindcss/αναλογία διαστάσεων' ) ,
] ,
} ;
Βήμα 3: Χρησιμοποιήστε την προσθήκη αναλογίας διαστάσεων σε πρόγραμμα HTML
Τώρα, φτιάξτε ένα πρόγραμμα HTML και χρησιμοποιήστε το πρόσθετο αναλογίας διαστάσεων σε αυτό. Για παράδειγμα, χρησιμοποιήσαμε το ' όψη-w-16 ' και ' όψη-η-9 ” τάξεις στο πρόγραμμά μας για διατήρηση της αναλογίας διαστάσεων 16:9:
< σώμα >< div τάξη = 'aspect-w-16 aspect-h-9' >
< iframe src = 'https://www.youtube.com/embed/NX_NW6bt6_s'
πλαίσιο πλαισίου = '0' επιτρέπω = 'επιταχυνσιόμετρο; αυτόματη αναπαραγωγή;
Πρόχειρο-εγγραφή? κρυπτογραφημένα μέσα. γυροσκόπιο;
εικόνα σε εικόνα' επιτρεπόμενη οθόνη iframe >
div >
σώμα >
Εδώ:
- Ο ' 'Το στοιχείο χρησιμοποιεί δύο κλάσεις προσθηκών αναλογίας διαστάσεων, π.χ., ' aspect-w-16 ' και ' όψη-η-9 '. Αυτές οι κλάσεις χρησιμοποιούνται για τη δημιουργία ενός κοντέινερ με σταθερή αναλογία διαστάσεων 16:9.
- Ο '