In Tailwind is de beeldverhouding de verhouding tussen de breedte en de hoogte van een element, zoals bij een video of een afbeelding. Tailwind CSS heeft native ondersteuning geïntroduceerd voor hulpprogramma's voor beeldverhouding, die de CSS-eigenschap beeldverhouding gebruiken om de gewenste beeldverhouding voor een element in te stellen. Deze eigenschap wordt echter niet ondersteund in oudere browsers. Daarom kunnen gebruikers de plug-in voor de beeldverhouding gebruiken om deze browsers te ondersteunen. Deze plug-in introduceert twee klassen, namelijk: “ aspect-w-{n} ' En ' aspect-h-{n} ”, die kunnen worden gecombineerd om een element een vaste beeldverhouding te geven.
In dit artikel wordt de methode uitgelegd om de aspect ratio-plug-in in Tailwind in te stellen.
Hoe kan ik de Aspect Ratio-plug-in instellen in Tailwind CSS?
Om de plug-in voor de beeldverhouding in Tailwind in te stellen, volgt u de onderstaande stappen:
- Installeer de plug-in voor de beeldverhouding in het project
- Voeg de plug-in voor de beeldverhouding toe aan het bestand “tailwind.config.js” en schakel de optie “ aspect kernplug-in
- Gebruik de plug-inklassen voor de beeldverhouding in het HTML-programma
- Controleer de uitvoer door de HTML-webpagina te bekijken
Stap 1: Installeer de plug-in Aspect Ratio in Tailwind Project
Open eerst de terminal en voer de onderstaande opdracht uit om de plug-in voor de beeldverhouding in het project te installeren:
asl en @ wind in de rug / aspectverhouding
Stap 2: Configureer de plug-in Aspect Ratio in het Tailwind-configuratiebestand
Open vervolgens het bestand “tailwind.config.js”, voeg de plug-in voor de beeldverhouding eraan toe en schakel de “ aspect ”kernplug-in om conflicten te voorkomen:
module.exports = {inhoud: [ './index.html' ] ,
kernplug-ins: {
beeldverhouding: vals ,
} ,
plug-ins: [
vereisen ( '@tailwindcss/aspect-ratio' ) ,
] ,
} ;
Stap 3: Gebruik de Aspect Ratio-plug-in in het HTML-programma
Maak nu een HTML-programma en gebruik daarin de aspectverhouding-plug-in. We hebben bijvoorbeeld de ‘ aspect-w-16 ' En ' aspect-h-9 ” klassen in ons programma om de beeldverhouding van 16:9 te behouden:
< lichaam >< div klas = 'aspect-w-16 aspect-h-9' >
< iframe src = 'https://www.youtube.com/embed/NX_NW6bt6_s'
kaderrand = '0' toestaan = 'versnellingsmeter; automatisch afspelen;
klembord-schrijven; gecodeerde media; gyroscoop;
foto in foto' sta volledig scherm toe > iframe >
div >
lichaam >
Hier:
- De ' 'element gebruikt twee plug-inklassen voor de beeldverhouding, d.w.z.' aspect-w-16 ' En ' aspect-h-9 ”. Deze klassen worden gebruikt om een container te maken met een vaste beeldverhouding van 16:9.
- De '