Articles
แนะนำ CSS
`aspect-ratio` และการออกแบบที่ตอบสนอง (Responsive Design)

`aspect-ratio` และการออกแบบที่ตอบสนอง (Responsive Design)

บทความนี้อธิบายเกี่ยวกับคุณสมบัติ aspect-ratio และการออกแบบที่ตอบสนอง

เราแนะนำเทคนิคการออกแบบที่ตอบสนองโดยใช้คุณสมบัติ aspect-ratio

YouTube Video

HTML สำหรับการแสดงตัวอย่าง

css-responsive-aspect-ratio.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-responsive-aspect-ratio.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Responsive Design</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>aspect-ratio</h2>
20        </header>
21        <article>
22            <h3>aspect-ratio Syntax</h3>
23            <section>
24                <header><h4>CSS</h4></header>
25<pre class="sample">
26aspect-ratio: &lt;ratio&gt;;
27</pre>
28            </section>
29        </article>
30        <article>
31            <h3>aspect-ratio 1:1</h3>
32            <section>
33                <header><h4>CSS</h4></header>
34<pre class="sample">
35.square {
36    width: 200px;
37    aspect-ratio: 1 / 1;
38}
39</pre>
40            </section>
41            <header><h4>HTML+CSS</h4></header>
42            <section class="sample-view">
43              <img src="example.jpg" class="square">
44            </section>
45        </article>
46        <article>
47            <h3>aspect-ratio 16:9</h3>
48            <section>
49                <header><h4>CSS</h4></header>
50<pre class="sample">
51.widescreen {
52    width: 100%;
53    aspect-ratio: 16 / 9;
54}
55</pre>
56            </section>
57            <section class="sample-view">
58              <img src="example.jpg" class="widescreen">
59            </section>
60        </article>
61        <article>
62            <h3>aspect-ratio 2</h3>
63            <section>
64                <header><h4>CSS</h4></header>
65<pre class="sample">
66.custom-ratio {
67    width: 400px;
68    aspect-ratio: 2;
69}
70</pre>
71            </section>
72            <section class="sample-view">
73              <img src="example.jpg" class="custom-ratio">
74            </section>
75        </article>
76        <article>
77            <h3>aspect-ratio Example</h3>
78            <section>
79                <header><h4>HTML</h4></header>
80<pre>
81&lt;div class="video-container"&gt;
82  &lt;iframe src="https://www.youtube.com/embed/example"&gt;&lt;/iframe&gt;
83&lt;/div&gt;
84</pre>
85                <header><h4>CSS</h4></header>
86<pre class="sample">
87.video-container {
88    width: 100%;
89    aspect-ratio: 16 / 9;
90}
91</pre>
92            </section>
93        </article>
94    </main>
95</body>
96</html>

คุณสมบัติ aspect-ratio

คุณสมบัติ aspect-ratio ใช้ในการกำหนดอัตราส่วนระหว่างความกว้างต่อความสูง (aspect ratio) ขององค์ประกอบ สิ่งนี้มีประโยชน์เมื่อคุณต้องการแสดงองค์ประกอบที่มีสัดส่วนคงที่ โดยเฉพาะสำหรับเนื้อหาสื่อ เช่น รูปภาพหรือวิดีโอ หรือในการออกแบบที่ตอบสนองได้

ไวยกรณ์พื้นฐาน 

1aspect-ratio: <ratio>;
  • <ratio> กำหนดอัตราส่วนความกว้างต่อความสูง อัตราส่วนเขียนในรูปแบบ "ความกว้าง:ความสูง" หรือแสดงด้วยตัวเลขเดียวสำหรับอัตราส่วนความกว้างต่อความสูง

ตัวอย่าง

อัตราส่วน 1:1 (สี่เหลี่ยมจัตุรัส)

นี่คือหน้าตาขององค์ประกอบเมื่อใช้อัตราส่วน 1:1

1.square {
2    width: 200px;
3    aspect-ratio: 1 / 1;
4}
  • ในกรณีนี้ องค์ประกอบที่มีคลาส .square จะถูกกำหนดให้มีความกว้างและความสูงเท่ากันเสมอ แสดงผลเป็นรูปสี่เหลี่ยมจัตุรัส

อัตราส่วน 16:9 (วิดีโอหรือรูปภาพจอกว้าง)

นี่คือหน้าตาขององค์ประกอบเมื่อใช้อัตราส่วน 16:9 ซึ่งมักใช้กับวิดีโอหรือรูปภาพแบบจอกว้าง

1.widescreen {
2    width: 100%;
3    aspect-ratio: 16 / 9;
4}
  • ในกรณีนี้ องค์ประกอบที่มีคลาส .widescreen จะปรับความสูงโดยอัตโนมัติตามความกว้างในขณะที่รักษาอัตราส่วน 16:9

ระบุอัตราส่วนด้วยตัวเลขเดียว

นี่คือหน้าตาขององค์ประกอบเมื่อระบุอัตราส่วนด้วยตัวเลขเดียว

1.custom-ratio {
2    width: 400px;
3    aspect-ratio: 2;
4}
  • ในที่นี้ ตัวเลข 2 แสดงถึงอัตราส่วน 2 / 1 ซึ่งทำให้ความกว้างขององค์ประกอบเป็นสองเท่าของความสูง

ประโยชน์ของคุณสมบัติ aspect-ratio

  • การออกแบบที่ปรับเปลี่ยนได้ตามอุปกรณ์ (Responsive Design) องค์ประกอบสามารถปรับขนาดโดยอัตโนมัติและยังคงรักษาอัตราส่วนขนาดเดิมได้เมื่อแสดงผลบนอุปกรณ์หรือหน้าต่างขนาดต่าง ๆ
  • การใช้งานที่ง่าย เพื่อรักษาอัตราส่วนที่เจาะจง ในอดีตนิยมใช้วิธีดั้งเดิมเช่น การใช้ padding แต่ด้วย aspect-ratio สามารถกำหนดได้ง่ายขึ้น

กรณีการใช้งานจริง

ตัวอย่างเช่น เครื่องเล่นวิดีโออย่าง YouTube มักจะแสดงผลด้วยอัตราส่วน 16:9 เพื่อรักษาอัตราส่วนนี้ สามารถใช้คุณสมบัติ aspect-ratio เพื่อสร้างคอนเทนเนอร์วิดีโอที่ตอบสนองได้อย่างง่ายดาย

1<div class="video-container">
2  <iframe src="https://www.youtube.com/embed/example"></iframe>
3</div>
1.video-container {
2    width: 100%;
3    aspect-ratio: 16 / 9;
4}
  • สิ่งนี้ช่วยให้วิดีโอรักษาอัตราส่วน 16:9 ได้บนทุกอุปกรณ์

สรุป

  • aspect-ratio เป็นคุณสมบัติที่กำหนดอัตราส่วนความกว้างต่อความสูงขององค์ประกอบ
  • การกำหนดอัตราส่วนช่วยให้สามารถนำการออกแบบที่ตอบสนองมาใช้งานได้อย่างง่ายดาย
  • เป็นสิ่งที่มีประโยชน์มากสำหรับองค์ประกอบที่ต้องรักษาอัตราส่วนภาพที่เฉพาะเจาะจง เช่น รูปภาพ วิดีโอ และรูปแบบการ์ด

เมื่อเปรียบเทียบกับเทคนิค CSS ที่ซับซ้อนแบบดั้งเดิม aspect-ratio มีความเรียบง่ายและใช้งานได้อย่างเข้าใจง่าย

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video

@media และการออกแบบที่ตอบสนอง