วิธีการ - อัตราส่วนภาพ
เรียนรู้วิธีรักษาอัตราส่วนกว้างยาวขององค์ประกอบด้วย CSS
อัตราส่วนภาพ
สร้างองค์ประกอบที่ยืดหยุ่นโดยรักษาอัตราส่วน (4:3, 16:9 ฯลฯ) เมื่อปรับขนาด:
อัตราส่วนภาพคืออะไร?
อัตราส่วนกว้างยาวขององค์ประกอบอธิบายความสัมพันธ์ตามสัดส่วนระหว่างความกว้างและความสูงขององค์ประกอบ อัตราส่วนกว้างยาวของวิดีโอสองแบบคือ 4:3 (รูปแบบวิดีโอสากลของศตวรรษที่ 20) และ 16:9 (อัตราส่วนสากลสำหรับโทรทัศน์ HD และโทรทัศน์ระบบดิจิทัลของยุโรป และค่าเริ่มต้นสำหรับวิดีโอ YouTube)
How To - ความสูงเท่ากับความกว้าง
ขั้นตอนที่ 1) เพิ่ม HTML:
ใช้องค์ประกอบคอนเทนเนอร์ เช่น <div> และหากคุณต้องการให้ข้อความอยู่ภายใน ให้เพิ่มองค์ประกอบย่อย:
ตัวอย่าง
<div class="container">
<div class="text">Some text</div> <!-- If
you want text inside the container -->
</div>
ขั้นตอนที่ 2) เพิ่ม CSS:
เพิ่มค่าเปอร์เซ็นต์padding-top
เพื่อรักษาอัตราส่วนกว้างยาวของ DIV ตัวอย่างต่อไปนี้จะสร้างอัตราส่วนกว้างยาว 1:1 (ความสูงและความกว้างจะเท่ากันเสมอ):
ตัวอย่าง 1:1 อัตราส่วนภาพ
.container {
background-color: red;
width: 100%;
padding-top: 100%; /* 1:1 Aspect
Ratio */
position: relative; /* If you want
text inside of it */
}
/* If you
want text inside of the container */
.text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
อัตราส่วนภาพอื่นๆ:
ตัวอย่าง 16:9 อัตราส่วนภาพ
.container {
padding-top: 56.25%; /* 16:9 Aspect
Ratio (divide 9 by 16 = 0.5625) */
}
ตัวอย่าง 4:3 อัตราส่วนภาพ
.container {
padding-top: 75%; /*
4:3 Aspect
Ratio (divide 3 by 4 = 0.75) */
}
ตัวอย่าง 3:2 อัตราส่วนภาพ
.container {
padding-top: 66.66%; /*
3:2 Aspect
Ratio (divide 2 by 3 = 0.6666) */
}
ตัวอย่าง 8:5 อัตราส่วนภาพ
.container {
padding-top: 62.5%; /*
8:5 Aspect
Ratio (divide 5 by 8 = 0.625) */
}