tailwindcss aspect ratio

@tailwindcss/agage-ratio

요소에 고정 종횡비를 제공하기위한 Composable API를 제공하는 플러그인.

설치

NPM에서 플러그인을 설치하십시오.

npm install -D @tailwindcss/aspect-ratio

그런 다음 플러그인을 tailwind.config.js 파일에 추가하고 aspectRatio Core 플러그인을 비활성화하여 Tailwind CSS v3.0에 포함 된 기본 aspect-ratio 유틸리티와 충돌을 피하십시오.

 // 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 속성이 지원되면 Tailwind 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

구성

tailwind.config.js 파일의 aspectRatio 키 아래이 플러그인에 의해 생성되는 값 및 변형을 구성 할 수 있습니다.

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

기본 종횡비 유틸리티와의 호환성

Tailwind CSS v3.0은 기본 종횡비 지원을 제공하고 있으며, 이러한 새로운 유틸리티는 훌륭하지만 Safari 14에서는 aspect-ratio 이 지원되지 않으며 여전히 전 세계적으로 사용되는 상당한 사용이 있습니다. 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 값이 덮어 쓰기 때문에 이것은 필요합니다.