เครื่องคำนวณอัตราส่วนภาพ (รักษาสัดส่วนเม
ตั้งอัตราส่วนเป้าหมายและมิติหนึ่ง มิติอื่นจะเติมอัตโนมัติ ทำงานในทิศทางกลับด้วย เหมาะสำหรับวิดีโอ การครอปรูป และเลย์เอาต์เว็บแบบ responsive
- อัตราส่วนภาพ
- 16:9
- ทศนิยม
- 1.7778
- ขนาด
- 1920 × 1080
วิธีการทำงาน
อัตราส่วนภาพคืออะไร
อัตราส่วนภาพอธิบายความกว้างเทียบกับความสูง: 16:9 หมายถึงกว้าง 16 หน่วยต่อสูง 9 หน่วย อัตราส่วนเดียวกันใช้ได้กับทุกขนาด 1920×1080 และ 800×450 ต่างก็เป็น 16:9 การรักษาอัตราส่วนภาพเมื่อปรับขนาดป้องกันไม่ให้ภาพบิดเบี้ยวหรือแบน และเป็นพื้นฐานของการออกแบบ responsive
รับตัวเลขจำนวนเต็ม (16:9) หรือทศนิยม (1.78:1) สำหรับอัตราส่วน และขนาดใดก็ได้สำหรับความกว้าง/ความสูง แก้ไขฟิลด์ใดก็ตาม ฟิลด์อื่นจะอัปเดตเพื่อรักษาอัตราส่วน อัตราส่วนทศนิยม (ความกว้าง / ความสูง) แสดงไว้สำหรับใช้ใน CSS calc() หรือเครื่องมือตัดต่อวิดีโอ
อัตราส่วนทั่วไปและการใช้งาน
16:9 — HDTV สมัยใหม่ จอคอมพิวเตอร์ YouTube ภาพยนตร์ส่วนใหญ่ตั้งแต่ปี 2009 เป็นค่าเริ่มต้นสำหรับเกือบทุกอย่างในปัจจุบัน
9:16 — วิดีโอแนวตั้งสำหรับ Instagram Stories, TikTok, YouTube Shorts เป็นด้านกลับของ 16:9 สำหรับเนื้อหาที่เน้นโทรศัพท์
1:1 — สี่เหลี่ยมจัตุรัส ค่าเริ่มต้น Instagram feed จนถึงปี 2021 ปกอัลบั้ม รูปโปรไฟล์
4:3 — โทรทัศน์และจอคอมพิวเตอร์รุ่นเก่าก่อน HD ยังคงใช้สำหรับเนื้อหาสไตล์คลาสสิกบางส่วน
3:2 — ค่าเริ่มต้น DSLR ฟิล์ม 35 มม. ภาพพิมพ์ขนาดใหญ่
21:9 — ซีนีมาอัลตร้าไวด์ ภาพยนตร์ที่ถ่ายแบบอนามอร์ฟิก จอ PC และโทรทัศน์บางรุ่น
เหตุใด CSS aspect-ratio จึงสำคัญ
CSS สมัยใหม่มี aspect-ratio: 16/9; ตั้งอัตราส่วนแล้วให้เบราว์เซอร์คำนวณความสูงจากความกว้าง (หรือกลับกัน) หลีกเลี่ยงเทคนิค padding-bottom แบบเก่าและจำเป็นสำหรับ responsive embeds และ image placeholders เพื่อป้องกัน layout shift
Cumulative Layout Shift (CLS) เป็น Core Web Vital วิดีโอที่ฝัง รูปภาพที่ไม่มีขนาด และโฆษณาล้วนอาจทำให้เกิด CLS แก้ไขโดยตั้ง width/height ที่ชัดเจน (ซึ่งเบราว์เซอร์ใช้คำนวณอัตราส่วนภาพ) หรือใช้ CSS aspect-ratio
คำถามที่พบบ่อย
›16:9 กับ 1.78:1 ต่างกันอย่างไร?
อัตราส่วนเดียวกัน สัญลักษณ์ต่างกัน 16/9 = 1.778 รูปแบบโคลอนเป็นธรรมเนียมในโทรทัศน์/เว็บ รูปแบบทศนิยมเป็นธรรมเนียมในภาพยนตร์
›รักษาอัตราส่วนภาพใน CSS ได้อย่างไร?
ใช้คุณสมบัติ aspect-ratio: img { aspect-ratio: 16/9; width: 100%; height: auto; } รูปภาพจะเต็มความกว้างของ container และความสูงปรับตามเพื่อรักษาอัตราส่วน
›ทำไมวิดีโอของฉันดูแปลกบนโทรทัศน์ 4:3?
วิดีโอสมัยใหม่ส่วนใหญ่เป็น 16:9 บนจอ 4:3 จะมีแถบดำ (letterbox) เสาข้าง (pillar-box) หรือยืดออก การตั้งค่าโทรทัศน์จะควบคุมรูปแบบที่ใช้
›ใช้อัตราส่วนที่ไม่ใช่จำนวนเต็มได้หรือไม่?
ได้ พิมพ์ 1.5 หรือ 2.39 เครื่องคำนวณถือเป็นทศนิยม ผลลัพธ์อัตราส่วนแบบลดทอนจะแสดงเฉพาะกับอัตราส่วนจำนวนเต็ม
›'อัตราส่วนพิกเซล' คืออะไร?
แนวคิดแยกต่างหาก: รูปร่างของพิกเซลแต่ละตัว จอสมัยใหม่ใช้พิกเซลสี่เหลี่ยมจัตุรัส (1:1) รูปแบบวิดีโอ SD เก่าบางรุ่นใช้พิกเซลที่ไม่ใช่สี่เหลี่ยมจัตุรัส เครื่องคำนวณนี้จัดการอัตราส่วนภาพสำหรับจอ ไม่ใช่อัตราส่วนพิกเซล
›'ลุค Cinematic' คืออะไร?
21:9 (หรือแม่นยำกว่าคือ 2.39:1 หรือ 2.40:1) กว้างกว่า HDTV พบในภาพยนตร์ blockbuster สมัยใหม่ บริการสตรีมมิ่งมักให้บริการภาพยนตร์ในอัตราส่วนนี้
›ทำไม Instagram Reel/TikTok จึงใช้ 9:16?
เพราะโทรศัพท์มักถือในแนวตั้ง 9:16 เต็มหน้าจอโทรศัพท์ด้วยเนื้อหา 16:9 ทิ้งแถบบนและล่างบนโทรศัพท์แนวตั้ง
›ข้อมูลออกไปจากเบราว์เซอร์หรือไม่?
ไม่ การคำนวณทำงานในเครื่อง
เครื่องมือที่เกี่ยวข้อง
อัปเดตล่าสุด: