tailwindcss aspect ratio

@tailwindcss/aspek-rasio

Plugin yang menyediakan API yang dapat dikomposisikan untuk memberikan elemen rasio aspek tetap.

Instalasi

Instal plugin dari NPM:

npm install -D @tailwindcss/aspect-ratio

Kemudian tambahkan plugin ke file tailwind.config.js Anda, dan nonaktifkan plugin inti aspectRatio untuk menghindari konflik dengan utilitas aspect-ratio asli yang termasuk dalam CSS Tailwind v3.0:

 // tailwind.config.js
module . exports = {
  theme : {
    // ...
  } ,
  corePlugins : {
    aspectRatio : false ,
  } ,
  plugins : [
    require ( '@tailwindcss/aspect-ratio' ) ,
    // ...
  ] ,
} 

Penggunaan

Gabungkan kelas aspect-w-{n} dan aspect-h-{n} untuk menentukan rasio aspek untuk suatu elemen:

 < div class =" aspect-w-16 aspect-h-9 " >
  < iframe src =" https://www.youtube.com/embed/dQw4w9WgXcQ " frameborder =" 0 " allow =" accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture " allowfullscreen > </ iframe >
</ div >

Gunakan aspect-none untuk menghapus perilaku rasio aspek apa pun:

 < div class =" aspect-w-16 aspect-h-9 lg:aspect-none " >
  <!-- ... -->
</ div >

Saat menghapus perilaku rasio aspek, jika elemen bersarang memiliki kelas w-{n} atau h-{n} , pastikan mereka ditentukan ulang dengan awalan breakpoint yang cocok:

 < div class =" aspect-w-16 aspect-h-9 lg:aspect-none " >
  < img src =" ... " alt =" ... " class =" w-full h-full object-center object-cover lg:w-full lg:h-full " />
</ div >

Perhatikan bahwa karena cara ini saat ini perlu diterapkan (trik bantalan-bantalan lama) Anda perlu menetapkan rasio aspek ke elemen induk , dan membuat elemen aktual yang Anda coba ukuran satu-satunya anak dari orang tua itu.

Setelah properti aspect-ratio didukung di browser modern, kami akan menambahkan dukungan resmi ke CSS tailwind itu sendiri dan mencela plugin ini.

Kelas rasio aspek hingga 16 dihasilkan secara default:

Lebar	Tinggi
aspect-w-1	aspect-h-1
aspect-w-2	aspect-h-2
aspect-w-3	aspect-h-3
aspect-w-4	aspect-h-4
aspect-w-5	aspect-h-5
aspect-w-6	aspect-h-6
aspect-w-7	aspect-h-7
aspect-w-8	aspect-h-8
aspect-w-9	aspect-h-9
aspect-w-10	aspect-h-10
aspect-w-11	aspect-h-11
aspect-w-12	aspect-h-12
aspect-w-13	aspect-h-13
aspect-w-14	aspect-h-14
aspect-w-15	aspect-h-15
aspect-w-16	aspect-h-16

Konfigurasi

Anda dapat mengonfigurasi nilai dan varian mana yang dihasilkan oleh plugin ini di bawah tombol aspectRatio di file tailwind.config.js Anda:

 // tailwind.config.js
module . exports = {
  theme : {
    aspectRatio : {
      1 : '1' ,
      2 : '2' ,
      3 : '3' ,
      4 : '4' ,
    }
  } ,
  variants : {
    aspectRatio : [ 'responsive' , 'hover' ]
  }
} 

Kompatibilitas dengan utilitas rasio aspek default

Tailwind CSS v3.0 dikirim dengan dukungan aspek-aspek asli, dan sementara utilitas baru ini hebat, properti aspect-ratio tidak didukung di Safari 14, yang masih memiliki penggunaan global yang signifikan. Jika Anda perlu mendukung Safari 14, plugin ini masih merupakan cara terbaik untuk melakukannya.

Meskipun secara teknis dimungkinkan untuk menggunakan utilitas aspect-ratio asli baru serta plugin ini dalam proyek yang sama, tidak terlalu masuk akal untuk melakukannya. Jika Anda dapat menggunakan utilitas aspek-rasio asli yang baru, cukup gunakan itu alih-alih plugin ini, karena mereka jauh lebih sederhana dan bekerja jauh lebih baik.

Namun, jika Anda ingin menggunakan kedua pendekatan dalam proyek Anda, mungkin sebagai cara transisi perlahan dari pendekatan plugin ke utilitas asli yang baru, Anda harus menambahkan nilai -nilai berikut ke file tailwind.config.js Anda:

 module . exports = {
  // ...
  theme : {
    aspectRatio : {
      auto : 'auto' ,
      square : '1 / 1' ,
      video : '16 / 9' ,
      1 : '1' ,
      2 : '2' ,
      3 : '3' ,
      4 : '4' ,
      5 : '5' ,
      6 : '6' ,
      7 : '7' ,
      8 : '8' ,
      9 : '9' ,
      10 : '10' ,
      11 : '11' ,
      12 : '12' ,
      13 : '13' ,
      14 : '14' ,
      15 : '15' ,
      16 : '16' ,
    } ,
  } ,
}

Ini diperlukan, karena nilai aspectRatio default ditimpa oleh nilai -nilai plugin ini.