UTILS.
เป็นส่วนตัวตั้งแต่เริ่ม
▭

กล่องอัตราส่วนภาพ CSS

สร้างกล่องอัตราส่วนภาพแบบ responsive พร้อมการรองรับสำรองด้วย padding

ไฟล์ของคุณอยู่ในอุปกรณ์นี้

ไฟล์ประมวลผลในเบราว์เซอร์และไม่ถูกอัปโหลด เว็บไซต์จะดาวน์โหลดโค้ดและทรัพยากรที่จำเป็นต่อเครื่องมือ ไม่ต้องมีบัญชีและไม่มีตัวติดตาม

ใช้ปุ่มดาวน์โหลดเพื่อบันทึกเครื่องมือนี้เป็นไฟล์ HTML ไฟล์เดียวสำหรับใช้ออฟไลน์

ความเป็นส่วนตัว →

เกี่ยวกับเครื่องมือนี้

ใส่อัตราส่วนความกว้างและความสูงเพื่อสร้างกล่องอัตราส่วนภาพแบบ responsive พร้อมทั้ง CSS aspect-ratio สมัยใหม่และการรองรับสำรองด้วยเปอร์เซ็นต์ padding-top ทั้งหมดทำงานในเบราว์เซอร์ของคุณ

คำถามที่พบบ่อย

ทำไมต้องมีการรองรับสำรองด้วย padding-top?
เทคนิคเปอร์เซ็นต์ padding-top ช่วยจำลองอัตราส่วนภาพคงที่ในเบราว์เซอร์รุ่นเก่าที่ไม่รองรับคุณสมบัติ aspect-ratio สมัยใหม่
อัตราส่วนถูกทอนให้เรียบง่ายหรือไม่?
ใช่ — ค่าอย่าง 16 และ 9 ถูกทอนด้วยตัวหารร่วมมากที่สุด ดังนั้น 1920 ต่อ 1080 จึงแสดงเป็น 16 / 9

เครื่องมือเพิ่มเติม