Wie stelle ich das Seitenverhältnis-Plugin in Tailwind ein?

Wie Stelle Ich Das Seitenverhaltnis Plugin In Tailwind Ein



In Tailwind ist das Seitenverhältnis das Verhältnis der Breite zur Höhe eines Elements, wie eines Videos oder eines Bildes. Tailwind CSS führte native Unterstützung für Seitenverhältnis-Dienstprogramme ein, die die CSS-Seitenverhältnis-Eigenschaft verwenden, um das gewünschte Seitenverhältnis für ein Element festzulegen. Diese Eigenschaft wird jedoch in älteren Browsern nicht unterstützt. Daher können Benutzer das Seitenverhältnis-Plugin verwenden, um diese Browser zu unterstützen. Dieses Plugin führt zwei Klassen ein, nämlich „ Aspekt-w-{n} ' Und ' Aspekt-h-{n} “, die kombiniert werden können, um einem Element ein festes Seitenverhältnis zu geben.

In diesem Artikel wird die Methode zum Festlegen des Seitenverhältnis-Plugins in Tailwind erläutert.







Wie stelle ich das Seitenverhältnis-Plugin in Tailwind CSS ein?

Um das Seitenverhältnis-Plugin in Tailwind festzulegen, sehen Sie sich die unten aufgeführten Schritte an:



  • Installieren Sie das Seitenverhältnis-Plugin im Projekt
  • Fügen Sie das Seitenverhältnis-Plugin in der Datei „tailwind.config.js“ hinzu und deaktivieren Sie „ Aspekt „Kern-Plugin
  • Verwenden Sie die Plugin-Klassen für das Seitenverhältnis im HTML-Programm
  • Überprüfen Sie die Ausgabe, indem Sie die HTML-Webseite anzeigen

Schritt 1: Installieren Sie das Aspect Ratio Plugin in Tailwind Project



Öffnen Sie zunächst das Terminal und führen Sie den unten angegebenen Befehl aus, um das Seitenverhältnis-Plugin im Projekt zu installieren:





asl und @ Rückenwindcss / Seitenverhältnis



Schritt 2: Konfigurieren Sie das Aspect Ratio Plugin in der Tailwind-Konfigurationsdatei

Öffnen Sie dann die Datei „tailwind.config.js“, fügen Sie das Seitenverhältnis-Plugin hinzu und deaktivieren Sie „ Aspekt ” Kern-Plugin, um Konflikte zu vermeiden:

module.exports = {
Inhalt: [ „./index.html“ ] ,

Kern-Plugins: {
Seitenverhältnis: FALSCH ,
} ,

Plugins: [
erfordern ( '@tailwindcss/aspect-ratio' ) ,
] ,
} ;

Schritt 3: Verwenden Sie das Aspect Ratio Plugin im HTML-Programm

Erstellen Sie nun ein HTML-Programm und verwenden Sie das darin enthaltene Seitenverhältnis-Plugin. Wir haben zum Beispiel das „“ verwendet. Aspekt-w-16 ' Und ' Aspekt-h-9 ”-Klassen in unserem Programm zur Beibehaltung des 16:9-Seitenverhältnisses:

< Körper >
< div Klasse = „Aspekt-w-16 Aspekt-h-9“ >
< iframe src = „https://www.youtube.com/embed/NX_NW6bt6_s“
Bilderrandbereich = „0“ erlauben = „Beschleunigungsmesser; Autoplay;
Zwischenablage-Schreiben; verschlüsselte Medien; Gyroskop;
Bild im Bild'
Vollbild erlauben > iframe >
div >
Körper >

Hier:

  • Der '
    Das Element verwendet zwei Seitenverhältnis-Plugin-Klassen, d. h. „ Aspekt-w-16 ' Und ' Aspekt-h-9 “. Diese Klassen werden verwendet, um einen Container mit einem festen Seitenverhältnis von 16:9 zu erstellen.
  • Der '