Tailwind'de en boy oranı, bir video veya resim gibi bir öğenin genişliğinin yüksekliğine oranıdır. Tailwind CSS, bir öğenin istenen en boy oranını ayarlamak için CSS en boy oranı özelliğini kullanan en boy oranı yardımcı programları için yerel destek sağladı. Ancak bu özellik eski tarayıcılarda desteklenmemektedir. Bu nedenle kullanıcılar bu tarayıcıları desteklemek için en boy oranı eklentisini kullanabilirler. Bu eklenti iki sınıfı tanıtır; örneğin, “ görünüş-w-{n} ' Ve ' görünüş-h-{n} ”, bir öğeye sabit bir en boy oranı vermek için birleştirilebilir.
Bu makale Tailwind'de en boy oranı eklentisini ayarlama yöntemini açıklayacaktır.
Tailwind CSS'de En Boy Oranı Eklentisi Nasıl Ayarlanır?
Tailwind'de en boy oranı eklentisini ayarlamak için aşağıda verilen adımlara bakın:
- En boy oranı eklentisini projeye yükleyin
- En boy oranı eklentisini “tailwind.config.js” dosyasına ekleyin ve “ bakış açısı ” çekirdek eklentisi
- HTML programındaki en boy oranı eklenti sınıflarını kullanın
- HTML web sayfasını görüntüleyerek çıktıyı doğrulayın
Adım 1: Tailwind Projesine En Boy Oranı Eklentisini Kurun
Öncelikle terminali açın ve en boy oranı eklentisini projeye kurmak için aşağıdaki komutu uygulayın:
asl ve @ arka rüzgar / en boy oranı
Adım 2: Tailwind Yapılandırma Dosyasında En Boy Oranı Eklentisini Yapılandırma
Ardından “tailwind.config.js” dosyasını açın, en boy oranı eklentisini buraya ekleyin ve “ bakış açısı ” herhangi bir çakışmayı önlemek için çekirdek eklenti:
modül.dışa aktarımlar = {içerik: [ './index.html' ] ,
çekirdek Eklentiler: {
en boy oranı: YANLIŞ ,
} ,
eklentiler: [
gerekmek ( '@tailwindcss/en-boy oranı' ) ,
] ,
} ;
Adım 3: HTML Programında En Boy Oranı Eklentisini Kullanın
Şimdi bir HTML programı yapın ve içindeki en boy oranı eklentisini kullanın. Örneğin, şu ifadeyi kullandık: ' görünüş-w-16 ' Ve ' görünüş-h-9 16:9 en-boy oranını korumak için programımızdaki dersler:
< vücut >< div sınıf = 'en-boy-w-16 en-boy-h-9' >
< iframe kaynak = 'https://www.youtube.com/embed/NX_NW6bt6_s'
Çerçeve sınırı = '0' izin vermek = 'ivmeölçer; otomatik oynatma;
panoya yazma; şifreli medya; jiroskop;
fotoğraf içinde fotoğraf' tam ekrana izin ver > iframe >
div >
vücut >
Burada:
- “ ” öğesi iki en boy oranı eklenti sınıfını kullanıyor, yani “ görünüş-w-16 ' Ve ' görünüş-h-9 ”. Bu sınıflar, sabit en boy oranı 16:9 olan bir kapsayıcı oluşturmak için kullanılır.
- “