Kako nastaviti vtičnik razmerja stranic v Tailwindu?

Kako Nastaviti Vticnik Razmerja Stranic V Tailwindu



V Tailwindu je razmerje stranic razmerje med širino in višino elementa, kot je video ali slika. Tailwind CSS je predstavil izvorno podporo za pripomočke za razmerje stranic, ki uporabljajo lastnost razmerja stranic CSS za nastavitev želenega razmerja stranic za element. Vendar ta lastnost ni podprta v starejših brskalnikih. Zato lahko uporabniki za podporo tem brskalnikom uporabljajo vtičnik za razmerje stranic. Ta vtičnik uvaja dva razreda, tj. aspekt-w-{n} « in » aspekt-h-{n} «, ki jih je mogoče kombinirati, da elementu zagotovijo fiksno razmerje stranic.

Ta članek bo razložil metodo za nastavitev vtičnika za razmerje stranic v Tailwindu.





Kako nastaviti vtičnik razmerja stranic v Tailwind CSS?

Če želite nastaviti vtičnik za razmerje stranic v Tailwindu, si oglejte spodnje korake:



  • Namestite vtičnik za razmerje stranic v projektu
  • Dodajte vtičnik razmerja stranic v datoteko »tailwind.config.js« in onemogočite » vidik ” osnovni vtičnik
  • Uporabite razrede vtičnika za razmerje stranic v programu HTML
  • Preverite izhod z ogledom spletne strani HTML

1. korak: Namestite vtičnik Aspect Ratio v Tailwind Project



Najprej odprite terminal in izvedite spodnji ukaz za namestitev vtičnika za razmerje stranic v projektu:



asl in @ tailwindcss / razmerje



2. korak: Konfigurirajte vtičnik Aspect Ratio v konfiguracijski datoteki Tailwind

Nato odprite datoteko »tailwind.config.js«, vanjo dodajte vtičnik za razmerje stranic in onemogočite » vidik ” osnovni vtičnik, da se izognete morebitnim sporom:

module.exports = {
vsebina: [ './index.html' ] ,

corePlugins: {
razmerje: lažno ,
} ,

vtičniki: [
zahtevati ( '@tailwindcss/aspect-ratio' ) ,
] ,
} ;

3. korak: Uporabite vtičnik za razmerje stranic v programu HTML

Zdaj naredite program HTML in v njem uporabite vtičnik za razmerje stranic. Na primer, uporabili smo  ' aspekt-w-16 « in » vidik-h-9 ” v našem programu za vzdrževanje razmerja stranic 16:9:

< telo >
< div razred = 'aspect-w-16 aspect-h-9' >
< iframe src = 'https://www.youtube.com/embed/NX_NW6bt6_s'
obroba okvirja = '0' dovoli = 'merilnik pospeška; samodejno predvajanje;
pisanje v odložišče; šifrirani mediji; žiroskop;
slika v sliki' dovoli cel zaslon > iframe >
div >
telo >

Tukaj:

  • '
    » element uporablja dva razreda vtičnika za razmerje stranic, tj. aspekt-w-16 « in » vidik-h-9 ”. Ti razredi se uporabljajo za ustvarjanje vsebnika s fiksnim razmerjem stranic 16:9.
  • '