A Tailwindben a képarány egy elem szélességének és magasságának aránya, például egy videó vagy egy kép. A Tailwind CSS bevezette a natív támogatást a képarány segédprogramokhoz, amelyek a CSS aspect-ratio tulajdonságot használják az elemek kívánt képarányának beállítására. Ez a tulajdonság azonban nem támogatott a régebbi böngészőkben. Ezért a felhasználók a képarány-bővítmény segítségével támogathatják ezeket a böngészőket. Ez a bővítmény két osztályt vezet be, azaz: aspektus-w-{n} ” és „ aspektus-h-{n} ”, amelyek kombinálásával egy elem fix képarányt ad.
Ez a cikk elmagyarázza a Tailwind képarány-bővítmény beállításának módszerét.
Hogyan állítsuk be az Aspect Ratio beépülő modult a Tailwind CSS-ben?
A Tailwind képarány-bővítményének beállításához kövesse az alábbi lépéseket:
- Telepítse a képarány bővítményt a projektben
- Adja hozzá a képarány bővítményt a „tailwind.config.js” fájlhoz, és tiltsa le a „ vonatkozás ” core plugin
- Használja a HTML program képarányos bővítményosztályait
- Ellenőrizze a kimenetet a HTML weboldal megtekintésével
1. lépés: Telepítse az Aspect Ratio beépülő modult a Tailwind Projectben
Először nyissa meg a terminált, és hajtsa végre az alábbi parancsot a képarány bővítmény telepítéséhez a projektben:
asl és @ hátszélcss / képarány
2. lépés: Konfigurálja az Aspect Ratio beépülő modult a Tailwind konfigurációs fájlban
Ezután nyissa meg a „tailwind.config.js” fájlt, adja hozzá a képarány bővítményt, és tiltsa le a „ vonatkozás ” alapbővítmény az ütközések elkerülése érdekében:
module.exports = {tartalom: [ './index.html' ] ,
corePlugins: {
képarány: hamis ,
} ,
bővítmények: [
igényelnek ( '@tailwindcss/aspect-ratio' ) ,
] ,
} ;
3. lépés: Használja az Aspect Ratio beépülő modult a HTML programban
Most készítsen egy HTML programot, és használja a képarány bővítményt. Például használtuk a „ aspektus-w-16 ” és „ szempont-h-9 ” osztályok programunkban a 16:9 képarány megőrzése érdekében:
< test >< div osztály = 'aspect-w-16 aspect-h-9' >
< iframe src = 'https://www.youtube.com/embed/NX_NW6bt6_s'
keretszegély = '0' lehetővé teszi = 'gyorsulásmérő; automatikus lejátszás;
vágólap-írás; titkosított média; giroszkóp;
kép a képben' teljes képernyő engedélyezése > iframe >
div >
test >
Itt:
- A ' ” elem két képarány-bővítményosztályt használ, azaz: „ aspektus-w-16 ” és „ szempont-h-9 ”. Ezeket az osztályokat egy 16:9 rögzített képarányú tároló létrehozására használják.
- A '