Tailwind formato santykis yra elemento pločio ir aukščio santykis, pvz., vaizdo įrašo ar vaizdo. Tailwind CSS pristatė savąjį palaikymą formato santykio komunalinėms programoms, kurios naudoja CSS kraštinių santykio ypatybę norimam elemento formato santykiui nustatyti. Tačiau ši nuosavybė nepalaikoma senesnėse naršyklėse. Todėl vartotojai gali naudoti kraštinių santykio papildinį, kad palaikytų šias naršykles. Šis papildinys pristato dvi klases, t. y. aspektas-w-{n} “ ir „ aspektas-h-{n} “, kuriuos galima sujungti, kad elementas būtų fiksuotas.
Šiame straipsnyje bus paaiškintas „Tailwind“ formato įskiepio nustatymo metodas.
Kaip nustatyti vaizdo santykio papildinį „Tailwind CSS“?
Norėdami nustatyti formato santykio papildinį „Tailwind“, peržiūrėkite toliau pateiktus veiksmus:
- Įdiekite formato santykio papildinį projekte
- Pridėkite kraštinių santykio papildinį į failą „tailwind.config.js“ ir išjunkite „ aspektas “ pagrindinis papildinys
- Naudokite kraštinių santykio papildinio klases HTML programoje
- Patikrinkite išvestį peržiūrėdami HTML tinklalapį
1 veiksmas: įdiekite „Aspect Ratio“ papildinį „Tailwind Project“.
Pirmiausia atidarykite terminalą ir vykdykite toliau nurodytą komandą, kad projekte įdiegtumėte kraštinių santykio papildinį:
asl ir @ galinis vėjascss / kraštinių santykis
2 veiksmas: sukonfigūruokite vaizdo santykio papildinį Tailwind konfigūracijos faile
Tada atidarykite failą „tailwind.config.js“, pridėkite prie jo formato koeficiento papildinį ir išjunkite „ aspektas “ pagrindinis papildinys, kad išvengtumėte konfliktų:
modulis.eksportas = {turinys: [ './index.html' ] ,
corePlugins: {
kraštinių santykis: klaidinga ,
} ,
papildiniai: [
reikalauti ( „@tailwindcss/aspect-ratio“ ) ,
] ,
} ;
3 veiksmas: naudokite „Aspect Ratio“ papildinį HTML programoje
Dabar sukurkite HTML programą ir naudokite joje vaizdo santykio papildinį. Pavyzdžiui, mes naudojome „ aspektas-w-16 “ ir „ aspektas-h-9 “ klasės mūsų programoje, kad išlaikytume 16:9 formato santykį:
< kūnas >< div klasė = 'aspect-w-16 aspect-h-9' >
< iframe src = „https://www.youtube.com/embed/NX_NW6bt6_s“
rėmo kraštinė = '0' leisti = 'akcelerometras; automatinis paleidimas;
iškarpinė-rašyti; šifruota laikmena; giroskopas;
vaizdas vaizde“ leisti visą ekraną > iframe >
div >
kūnas >
Čia:
- „ “ elementas naudoja dvi kraštinių santykio įskiepių klases, t. y. „ aspektas-w-16 “ ir „ aspektas-h-9 “. Šios klasės naudojamos kuriant konteinerį su fiksuotu 16:9 formato santykiu.
- „