หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

@tailwindcss/อัตราส่วนอสังหาริมทรัพย์

ปลั๊กอินที่ให้ API แบบคอมโพสิตสำหรับการให้องค์ประกอบอัตราส่วนคงที่

การติดตั้ง

ติดตั้งปลั๊กอินจาก NPM: 

npm install -D @tailwindcss/aspect-ratio

จากนั้นเพิ่มปลั๊กอินลงในไฟล์ tailwind.config.js ของคุณและปิดใช้งานปลั๊กอินแกน aspectRatio เพื่อหลีกเลี่ยงความขัดแย้งกับยูทิลิตี้ 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 ในเบราว์เซอร์สมัยใหม่เราจะเพิ่มการสนับสนุนอย่างเป็นทางการให้กับ 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

การกำหนดค่า

คุณสามารถกำหนดค่าค่าและตัวแปรใดที่สร้างขึ้นโดยปลั๊กอินนี้ภายใต้คีย์ 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 เริ่มต้นถูกเขียนทับโดยค่าของปลั๊กอินนี้

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด