Ako nastaviť doplnok pomeru strán v systéme Tailwind?

Ako Nastavit Doplnok Pomeru Stran V Systeme Tailwind



V Tailwind je pomer strán pomer šírky a výšky prvku, napríklad videa alebo obrázka. Tailwind CSS zaviedol natívnu podporu pre nástroje pomeru strán, ktoré na nastavenie požadovaného pomeru strán prvku používajú vlastnosť CSS pomeru strán. Táto vlastnosť však nie je podporovaná v starších prehliadačoch. Používatelia preto môžu použiť doplnok pre pomer strán na podporu týchto prehliadačov. Tento doplnok zavádza dve triedy, napr. aspekt-w-{n} “ a „ aspekt-h-{n} “, ktoré je možné skombinovať a poskytnúť prvku pevný pomer strán.

Tento článok vysvetlí spôsob nastavenia doplnku pomeru strán v Tailwinde.





Ako nastaviť doplnok pomeru strán v Tailwind CSS?

Ak chcete nastaviť doplnok pomeru strán v Tailwinde, pozrite si kroky uvedené nižšie:



  • Nainštalujte doplnok pre pomer strán v projekte
  • Pridajte doplnok pre pomer strán do súboru „tailwind.config.js“ a vypnite „ aspekt “základný doplnok
  • Použite triedy doplnkov pre pomer strán v programe HTML
  • Overte výstup zobrazením webovej stránky HTML

Krok 1: Nainštalujte doplnok Aspect Ratio Plugin v projekte Tailwind



Najprv otvorte terminál a vykonajte nižšie uvedený príkaz na inštaláciu doplnku pomeru strán do projektu:



nadmorská výška a @ tailwindcss / pomer strán



Krok 2: Nakonfigurujte doplnok Aspect Ratio Plugin v konfiguračnom súbore Tailwind

Potom otvorte súbor „tailwind.config.js“, pridajte doň doplnok pomeru strán a vypnite „ aspekt ” hlavný doplnok, aby sa predišlo akýmkoľvek konfliktom:

modul.export = {
obsah: [ './index.html' ] ,

corePlugins: {
pomer strán: falošné ,
} ,

pluginy: [
vyžadovať ( '@tailwindcss/aspect-ratio' ) ,
] ,
} ;

Krok 3: Použite doplnok Aspect Ratio Plugin v programe HTML

Teraz vytvorte HTML program a použite v ňom doplnok pomeru strán. Použili sme napríklad  “ aspekt-w-16 “ a „ pomer-h-9 ” triedy v našom programe na zachovanie pomeru strán 16:9:

< telo >
< div trieda = 'aspekt-w-16 aspekt-h-9' >
< iframe src = 'https://www.youtube.com/embed/NX_NW6bt6_s'
rámová hranica = '0' povoliť = 'akcelerometer; automatické prehrávanie;
schránka-písať; šifrované médiá; gyroskop;
obraz v obraze' povolená celá obrazovka > iframe >
div >
telo >

Tu:

  • '
    ” prvok používa dve triedy doplnkov pomeru strán, napr. aspekt-w-16 “ a „ pomer-h-9 “. Tieto triedy sa používajú na vytvorenie kontajnera s pevným pomerom strán 16:9.
  • '