Kako postaviti dodatak omjera slike u Tailwindu?

Kako Postaviti Dodatak Omjera Slike U Tailwindu



U Tailwindu, omjer slike je omjer širine i visine elementa, poput videozapisa ili slike. Tailwind CSS uveo je izvornu podršku za pomoćne programe omjera širine i visine, koji koriste svojstvo CSS omjera slike za postavljanje željenog omjera slike za element. Međutim, ovo svojstvo nije podržano u starijim preglednicima. Stoga korisnici mogu koristiti dodatak za omjer slike za podršku ovim preglednicima. Ovaj dodatak uvodi dvije klase, tj. ' aspekt-w-{n} ' i ' aspekt-h-{n} “, koji se mogu kombinirati kako bi element dobio fiksni omjer širine i visine.

Ovaj će članak objasniti metodu postavljanja dodatka omjera slike u Tailwindu.





Kako postaviti dodatak za omjer slike u Tailwind CSS-u?

Da biste postavili dodatak omjera slike u Tailwindu, pogledajte dolje navedene korake:



  • Instalirajte dodatak za omjer slike u projekt
  • Dodajte dodatak za omjer slike u datoteku 'tailwind.config.js' i onemogućite ' aspekt ” osnovni dodatak
  • Upotrijebite klase dodataka za omjer slike u HTML programu
  • Provjerite izlaz gledajući HTML web stranicu

Korak 1: Instalirajte dodatak za omjer slike u projektu Tailwind



Prvo otvorite terminal i izvršite donju naredbu da biste instalirali dodatak za omjer slike u projekt:



asl i @ stražnji vjetarcss / omjer stranica



Korak 2: Konfigurirajte dodatak za omjer slike u konfiguracijskoj datoteci Tailwind

Zatim otvorite datoteku 'tailwind.config.js', dodajte dodatak za omjer slike u nju i onemogućite ' aspekt ” osnovni dodatak za izbjegavanje bilo kakvih sukoba:

modul.izvozi = {
sadržaj: [ './index.html' ] ,

osnovni dodaci: {
omjer slike: lažno ,
} ,

dodaci: [
zahtijevati ( '@tailwindcss/aspect-ratio' ) ,
] ,
} ;

Korak 3: Koristite dodatak za omjer slike u HTML programu

Sada napravite HTML program i upotrijebite dodatak za omjer slike u njemu. Na primjer, koristili smo  ' aspekt-w-16 ' i ' aspekt-h-9 ” u našem programu za održavanje omjera slike 16:9:

< tijelo >
< div razreda = 'aspekt-w-16 aspekt-h-9' >
< iframe src = 'https://www.youtube.com/embed/NX_NW6bt6_s'
granica okvira = '0' dopustiti = 'akcelerometar; autoplay;
međuspremnik-pisati; šifrirani mediji; žiroskop;
slika u slici' dopusti cijeli zaslon > iframe >
div >
tijelo >

Ovdje:

  • '
    ' element koristi dvije klase dodataka omjera širine i visine, tj. ' aspekt-w-16 ' i ' aspekt-h-9 ”. Ove se klase koriste za stvaranje spremnika s fiksnim omjerom 16:9.
  • '