Tailwindissä kuvasuhde on elementin, kuten videon tai kuvan, leveyden ja korkeuden välinen suhde. Tailwind CSS esitteli natiivituen kuvasuhdeapuohjelmille, jotka käyttävät CSS:n kuvasuhdeominaisuutta asettaakseen halutun kuvasuhteen elementille. Tätä ominaisuutta ei kuitenkaan tueta vanhemmissa selaimissa. Siksi käyttäjät voivat käyttää kuvasuhdelaajennusta tukeakseen näitä selaimia. Tämä laajennus esittelee kaksi luokkaa, eli ' aspekti-w-{n} ' ja ' aspekti-h-{n} ”, joita voidaan yhdistää antamaan elementille kiinteä kuvasuhde.
Tässä artikkelissa selitetään tapa asettaa kuvasuhdelaajennus Tailwindissä.
Kuinka asettaa Aspect Ratio Plugin Tailwind CSS:ssä?
Jos haluat asettaa kuvasuhdelaajennuksen Tailwindissä, katso alla olevat vaiheet:
- Asenna kuvasuhdelaajennus projektiin
- Lisää kuvasuhdelaajennus 'tailwind.config.js'-tiedostoon ja poista ' näkökohta ”ydinlaajennus
- Käytä HTML-ohjelman kuvasuhdelaajennusten luokkia
- Tarkista tulos katsomalla HTML-verkkosivua
Vaihe 1: Asenna Aspect Ratio Plugin Tailwind Projectiin
Avaa ensin pääte ja suorita alla oleva komento asentaaksesi kuvasuhdelaajennuksen projektiin:
asl ja @ myötätuuli css / kuvasuhde
Vaihe 2: Määritä Aspect Ratio -laajennus Tailwind Config -tiedostossa
Avaa sitten 'tailwind.config.js'-tiedosto, lisää siihen kuvasuhdelaajennus ja poista ' näkökohta ”ydinlaajennus ristiriitojen välttämiseksi:
module.exports = {sisältö: [ './index.html' ] ,
corePlugins: {
kuvasuhde: väärä ,
} ,
laajennukset: [
vaatia ( @tailwindcss/aspect-ratio ) ,
] ,
} ;
Vaihe 3: Käytä Aspect Ratio Plugin -laajennusta HTML-ohjelmassa
Tee nyt HTML-ohjelma ja käytä siinä olevaa kuvasuhdelaajennusta. Olemme esimerkiksi käyttäneet aspekti-w-16 ' ja ' aspekti-h-9 ”-luokat ohjelmassamme 16:9-kuvasuhteen säilyttämiseksi:
< kehon >< div luokkaa = 'aspect-w-16 aspect-h-9' >
< iframe src = 'https://www.youtube.com/embed/NX_NW6bt6_s'
kehyskehys = '0' sallia = 'kiihtyvyysanturi; automaattinen toisto;
leikepöydälle kirjoitus; salattu media; gyroskooppi;
kuva kuvassa' salli täysi näyttö > iframe >
div >
kehon >
Tässä:
- ' ' -elementti käyttää kahta kuvasuhdelaajennusluokkaa, eli ' aspekti-w-16 ' ja ' aspekti-h-9 ”. Näitä luokkia käytetään säilön luomiseen kiinteällä kuvasuhteella 16:9.
- '