Kā iestatīt Aspect Ratio spraudni programmā Tailwind?

Ka Iestatit Aspect Ratio Spraudni Programma Tailwind



Programmā Tailwind malu attiecība ir elementa platuma un augstuma attiecība, piemēram, video vai attēls. Tailwind CSS ieviesa vietējo atbalstu malu attiecības utilītprogrammām, kas izmanto CSS proporcijas rekvizītu, lai iestatītu elementam vēlamo malu attiecību. Tomēr vecākajās pārlūkprogrammās šis rekvizīts netiek atbalstīts. Tādēļ lietotāji var izmantot malu attiecības spraudni, lai atbalstītu šīs pārlūkprogrammas. Šis spraudnis ievieš divas klases, t.i., ' aspekts-w-{n} ' un ' aspekts-h-{n} ”, ko var apvienot, lai elementam piešķirtu fiksētu malu attiecību.

Šajā rakstā tiks izskaidrota malu attiecības spraudņa iestatīšanas metode programmā Tailwind.





Kā iestatīt Aspect Ratio spraudni Tailwind CSS?

Lai iestatītu malu attiecības spraudni programmā Tailwind, skatiet tālāk norādītās darbības.



  • Instalējiet projektā malu attiecības spraudni
  • Pievienojiet malu attiecības spraudni failam “tailwind.config.js” un atspējojiet “ aspekts ” pamata spraudnis
  • Izmantojiet malu attiecības spraudņu klases HTML programmā
  • Pārbaudiet rezultātu, apskatot HTML tīmekļa lapu

1. darbība. Instalējiet Aspect Ratio spraudni programmā Tailwind Project



Vispirms atveriet termināli un izpildiet tālāk norādīto komandu, lai projektā instalētu proporcijas spraudni:



asl un @ aizvēja css / malu attiecība



2. darbība: konfigurējiet Aspect Ratio spraudni Tailwind konfigurācijas failā

Pēc tam atveriet failu “tailwind.config.js”, pievienojiet tam malu attiecības spraudni un atspējojiet “ aspekts ” pamata spraudnis, lai izvairītos no konfliktiem:

modulis.eksports = {
saturs: [ './index.html' ] ,

corePlugins: {
malu attiecība: viltus ,
} ,

spraudņi: [
pieprasīt ( '@tailwindcss/aspect-ratio' ) ,
] ,
} ;

3. darbība. Izmantojiet Aspect Ratio spraudni HTML programmā

Tagad izveidojiet HTML programmu un izmantojiet tajā esošo malu attiecības spraudni. Piemēram, mēs esam izmantojuši “ aspekts-w-16 ' un ' aspekts-h-9 ” klases mūsu programmā, lai saglabātu malu attiecību 16:9:

< ķermeni >
< div klasē = 'aspect-w-16 aspect-h-9' >
< iframe src = 'https://www.youtube.com/embed/NX_NW6bt6_s'
rāmja apmale = '0' Atļaut = 'akselerometrs; automātiskā atskaņošana;
starpliktuve-rakstīt; šifrētie mediji; žiroskops;
attēls attēlā' atļaut pilnu ekrānu > iframe >
div >
ķermeni >

Šeit:

  • '
    ” elements izmanto divas malu attiecības spraudņa klases, t.i., “ aspekts-w-16 ' un ' aspekts-h-9 ”. Šīs klases tiek izmantotas, lai izveidotu konteineru ar fiksētu malu attiecību 16:9.
  • '