ใน Tailwind อัตราส่วนภาพคือสัดส่วนของความกว้างต่อความสูงขององค์ประกอบ เช่น วิดีโอหรือรูปภาพ Tailwind CSS เปิดตัวการรองรับดั้งเดิมสำหรับยูทิลิตีอัตราส่วนภาพ ซึ่งใช้คุณสมบัติ CSS อัตราส่วนกว้างยาวเพื่อกำหนดอัตราส่วนที่ต้องการสำหรับองค์ประกอบ อย่างไรก็ตาม คุณสมบัตินี้ไม่รองรับในเบราว์เซอร์รุ่นเก่า ดังนั้นผู้ใช้สามารถใช้ปลั๊กอินอัตราส่วนภาพเพื่อรองรับเบราว์เซอร์เหล่านี้ได้ ปลั๊กอินนี้แนะนำสองคลาสคือ “ ด้าน-w-{n} ' และ ' ด้าน-h-{n} ” ซึ่งสามารถนำมารวมกันเพื่อให้องค์ประกอบมีอัตราส่วนคงที่
บทความนี้จะอธิบายวิธีการตั้งค่าปลั๊กอินอัตราส่วนภาพใน Tailwind
วิธีการตั้งค่าปลั๊กอินอัตราส่วนภาพใน Tailwind CSS
หากต้องการตั้งค่าปลั๊กอินอัตราส่วนภาพใน Tailwind ให้ดูขั้นตอนที่ให้ไว้ด้านล่าง:
- ติดตั้งปลั๊กอินอัตราส่วนภาพในโครงการ
- เพิ่มปลั๊กอินอัตราส่วนภาพในไฟล์ “tailwind.config.js” และปิดการใช้งาน “ ด้าน ” ปลั๊กอินหลัก
- ใช้คลาสปลั๊กอินอัตราส่วนกว้างยาวในโปรแกรม HTML
- ตรวจสอบผลลัพธ์โดยการดูหน้าเว็บ HTML
ขั้นตอนที่ 1: ติดตั้งปลั๊กอินอัตราส่วนภาพในโครงการ Tailwind
ขั้นแรก เปิดเทอร์มินัลแล้วดำเนินการคำสั่งด้านล่างเพื่อติดตั้งปลั๊กอินอัตราส่วนภาพในโปรเจ็กต์:
เช่นและ @ หางลมcss / อัตราส่วนภาพ
ขั้นตอนที่ 2: กำหนดค่าปลั๊กอินอัตราส่วนภาพในไฟล์กำหนดค่า Tailwind
จากนั้น เปิดไฟล์ “tailwind.config.js” เพิ่มปลั๊กอินอัตราส่วนภาพในนั้น และปิดการใช้งาน “ ด้าน ” ปลั๊กอินหลักเพื่อหลีกเลี่ยงความขัดแย้ง:
โมดูล.ส่งออก= {เนื้อหา: [ './index.html' ] ,
ปลั๊กอินหลัก: {
อัตราส่วนภาพ: เท็จ ,
} ,
ปลั๊กอิน: [
จำเป็นต้อง ( '@tailwindcss/อัตราส่วนภาพ' ) ,
] ,
} ;
ขั้นตอนที่ 3: ใช้ปลั๊กอินอัตราส่วนภาพในโปรแกรม HTML
ตอนนี้ สร้างโปรแกรม HTML และใช้ปลั๊กอินอัตราส่วนภาพในนั้น ตัวอย่างเช่น เราใช้ “ ด้าน-w-16 ' และ ' ด้าน-h-9 ” คลาสในโปรแกรมของเราเพื่อรักษาอัตราส่วนภาพ 16:9:
< ร่างกาย >< กอง ระดับ = 'ด้าน-w-16 ด้าน-h-9' >
< ไอเฟรม src = 'https://www.youtube.com/embed/NX_NW6bt6_s'
เส้นขอบกรอบ = '0' อนุญาต = 'มาตรความเร่ง; เล่นอัตโนมัติ;
คลิปบอร์ด-เขียน; สื่อที่เข้ารหัส; ไจโรสโคป;
ภาพซ้อนภาพ' อนุญาตเต็มหน้าจอ > ไอเฟรม >
กอง >
ร่างกาย >
ที่นี่:
- “ ” องค์ประกอบใช้คลาสปลั๊กอินอัตราส่วนสองคลาส ได้แก่ “ ด้าน-w-16 ' และ ' ด้าน-h-9 '. คลาสเหล่านี้ใช้เพื่อสร้างคอนเทนเนอร์ที่มีอัตราส่วนคงที่ 16:9
- “ <ไอเฟรม> ” ใช้เพื่อฝังวิดีโอ YouTube
- “ src ” แอตทริบิวต์กำหนด URL แหล่งที่มาของวิดีโอที่จะฝัง
- “ เส้นขอบกรอบ ค่าของแอตทริบิวต์ ' คือ '0' ซึ่งจะลบเส้นขอบรอบวิดีโอที่ฝังไว้
- “ อนุญาต ” แอตทริบิวต์ระบุการอนุญาตสำหรับวิดีโอที่ฝังไว้ เช่น การอนุญาตให้เล่นอัตโนมัติและโหมดภาพซ้อนภาพ
- “ อนุญาตเต็มหน้าจอ ” ทำให้สามารถรับชมวิดีโอในโหมดเต็มหน้าจอได้
บันทึก: ตรวจสอบให้แน่ใจว่าลิงก์ไปยังวิดีโอนั้นฝังอยู่
ขั้นตอนที่ 4: ตรวจสอบผลลัพธ์
สุดท้ายให้รันโปรแกรม HTML และดูหน้าเว็บเพื่อตรวจสอบผลลัพธ์:
ตามผลลัพธ์ด้านบน คลาสปลั๊กอินอัตราส่วนภาพช่วยให้แน่ใจว่าคอนเทนเนอร์รักษาอัตราส่วนภาพที่ต้องการ เช่น 16:9
บทสรุป
หากต้องการตั้งค่าปลั๊กอินอัตราส่วนกว้างยาวใน Tailwind ขั้นแรกให้ติดตั้งปลั๊กอินอัตราส่วนกว้างยาวในโปรเจ็กต์ จากนั้นเพิ่มปลั๊กอินอัตราส่วนภาพในไฟล์ “tailwind.config.js” และตั้งค่า “ ด้าน ” ค่าของปลั๊กอินหลักเป็น “ เท็จ ” เพื่อปิดการใช้งาน หลังจากนั้น ให้ใช้คลาสปลั๊กอินอัตราส่วนภาพในโปรแกรม HTML สุดท้าย ตรวจสอบผลลัพธ์โดยการดูหน้าเว็บ HTML บทความนี้จะอธิบายวิธีการตั้งค่าปลั๊กอินอัตราส่วนภาพใน Tailwind