tailwindcss aspect ratio

@Tailwindcss/Aspektverhältnis

Ein Plugin, das eine komponierbare API bietet, um Elemente ein festes Seitenverhältnis zu verleihen.

Installation

Installieren Sie das Plugin von NPM:

npm install -D @tailwindcss/aspect-ratio

Fügen Sie dann das Plugin zu Ihrer Datei tailwind.config.js hinzu und deaktivieren Sie das aspectRatio Kern-Plugin, um Konflikte mit den in den Tailwind CSS v3.0 enthaltenen nativen aspect-ratio -Dienstprogrammen zu vermeiden:

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

Verwendung

Kombinieren Sie die aspect-w-{n} und aspect-h-{n} -Klassen, um das Seitenverhältnis für ein Element anzugeben:

 < 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 >

Verwenden Sie aspect-none um jedes Seitenverhältnisverhalten zu entfernen:

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

Wenn verschachtelte Elemente w-{n} oder h-{n} -Klassen haben, stellen Sie sicher, dass sie sicherstellen, dass sie mit einem passenden Haltepunktpräfix neu deklariert werden:

 < 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 >

Beachten Sie, dass Sie aufgrund der derzeitigen Implementierung (der alte Trick des Polsterbodens) das Seitenverhältnis einem übergeordneten Element zuweisen und das tatsächliche Element, das Sie versuchen, das einzige Kind dieses übergeordneten Elternteils zu begrüßen.

Sobald das aspect-ratio in modernen Browsern unterstützt wird, werden wir den Tailwind CSS selbst offiziell unterstützen und dieses Plugin abbauen.

Seitenverhältnisklassen bis zu 16 werden standardmäßig generiert:

Breite	Höhe
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

Konfiguration

Sie können konfigurieren, welche Werte und Varianten durch dieses Plugin unter der aspectRatio -Taste in Ihrer Datei tailwind.config.js erzeugt werden:

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

Kompatibilität mit Standard-Aspekt-Verhältnis-Dienstprogrammen

Tailwind CSS v3.0 mit nativem Aspekt-Verhältnis-Unterstützung verschifft, und obwohl diese neuen Versorgungsunternehmen großartig sind, wird das aspect-ratio Eigentum in Safari 14 nicht unterstützt, die immer noch eine erhebliche globale Nutzung haben. Wenn Sie Safari 14 unterstützen müssen, ist dieses Plugin immer noch der beste Weg, dies zu tun.

Es ist zwar technisch möglich, die neuen nativen aspect-ratio sowie dieses Plugin im selben Projekt zu verwenden, aber es ist nicht wirklich sinnvoll, dies zu tun. Wenn Sie in der Lage sind, die neuen nativen Aspektverhältnisse zu verwenden, verwenden Sie sie einfach anstelle dieses Plugins, da sie viel einfacher sind und viel besser funktionieren.

Wenn Sie jedoch beide Ansätze in Ihrem Projekt verwenden möchten, müssen Sie möglicherweise von dem Plugin -Ansatz zu den neuen nativen Versorgungsunternehmen langsam wechseln, sondern müssen die folgenden Werte zu Ihrer Datei tailwind.config.js hinzufügen:

 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' ,
    } ,
  } ,
}

Dies ist erforderlich, da die Standard aspectRatio durch die Werte dieses Plugins überschrieben werden.