tailwindcss aspect ratio

@Tailwindcss/Aspose-Ratio

Плагин, который обеспечивает композиционный API для предоставления элементам с фиксированным соотношением сторон.

Установка

Установите плагин от NPM:

npm install -D @tailwindcss/aspect-ratio

Затем добавьте плагин в свой файл tailwind.config.js и отключите плагин aspectRatio Core, чтобы избежать конфликтов с нативными утилитами aspect-ratio , включенными в Tailwind CSS v3.0:

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

Использование

Объедините классы aspect-w-{n} и aspect-h-{n} чтобы указать соотношение аспекта для элемента:

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

Используйте aspect-none , чтобы удалить любое поведение соотношения сторон:

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

При удалении поведения соотношения сторон, если вложенные элементы имеют классы w-{n} или h-{n} , убедитесь, что они переизданы с подходящим префиксом точки останова:

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

Обратите внимание, что из-за того, как это в настоящее время необходимо реализовать (старый трюк с подкладкой), вам необходимо назначить соотношение сторон для родительского элемента и сделать фактический элемент, который вы пытаетесь разместить единственного ребенка этого родителя.

После того, как свойство aspect-ratio будет поддерживаться в современных браузерах, мы добавим официальную поддержку самому CSS и оправдаем этот плагин.

Классы соотношения сторон до 16 генерируются по умолчанию:

Ширина	Высота
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

Конфигурация

Вы можете настроить, какие значения и варианты генерируются этим плагином под ключом aspectRatio в вашем файле tailwind.config.js :

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

Совместимость с утилитами аспекта по умолчанию

Tailwind CSS V3.0, поставляемый с поддержкой нативного аспекта, и, хотя эти новые утилиты великолепны, свойство aspect-ratio не поддерживается в Safari 14, что все еще имеет значительное глобальное использование. Если вам нужно поддержать Safari 14, этот плагин по -прежнему является лучшим способом сделать это.

Несмотря на то, что технически возможно использовать новые нативные утилиты aspect-ratio а также этот плагин в одном и том же проекте, это на самом деле не имеет большого смысла. Если вы можете использовать новые нативные утилиты-аспекты, просто используйте их вместо этого плагина, так как они намного проще и работают намного лучше.

Однако, если вы действительно хотите использовать оба подхода в своем проекте, возможно, в качестве способа медленного перехода от подхода плагина к новым нативным утилитам, вам нужно добавить следующие значения в свой файл tailwind.config.js :

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

Это необходимо, так как значения aspectRatio по умолчанию перезаписываются значениями этого плагина.