Articles
Pengenalan kepada CSS
`aspect-ratio` Property dan Reka Bentuk Responsif

`aspect-ratio` Property dan Reka Bentuk Responsif

Artikel ini menerangkan tentang aspect-ratio Property dan reka bentuk responsif.

Kami memperkenalkan teknik reka bentuk responsif menggunakan aspect-ratio Property.

YouTube Video

HTML untuk Pratonton

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>

Ciri aspect-ratio

Ciri aspect-ratio digunakan untuk menetapkan nisbah lebar kepada tinggi (nisbah aspek) sesuatu elemen. Ciri ini berguna apabila anda ingin memaparkan elemen dengan nisbah tetap, terutamanya untuk kandungan media seperti gambar atau video, atau dalam reka bentuk responsif.

Sintaks Asas 

1aspect-ratio: <ratio>;
  • <ratio> menetapkan nisbah lebar kepada tinggi. Nisbah ditulis dalam format "width:height" atau diwakili oleh satu nombor untuk nisbah lebar kepada tinggi.

Contoh

Nisbah Aspek 1:1 (Segi Empat Sama)

Beginilah rupanya dengan nisbah aspek 1:1.

1.square {
2    width: 200px;
3    aspect-ratio: 1 / 1;
4}
  • Dalam kes ini, elemen dengan kelas .square ditetapkan supaya sentiasa mempunyai lebar dan tinggi yang sama, dipaparkan sebagai segi empat sama.

Nisbah Aspek 16:9 (Video atau Imej Skrin Lebar)

Beginilah rupanya dengan nisbah aspek 16:9, yang sering digunakan untuk video atau imej skrin lebar.

1.widescreen {
2    width: 100%;
3    aspect-ratio: 16 / 9;
4}
  • Dalam kes ini, elemen dengan kelas .widescreen secara automatik menyesuaikan ketinggian mereka mengikut lebar sambil mengekalkan nisbah aspek 16:9.

Tentukan Nisbah dengan Satu Nombor Sahaja

Beginilah rupanya apabila menetapkan nisbah dengan satu nombor sahaja.

1.custom-ratio {
2    width: 400px;
3    aspect-ratio: 2;
4}
  • Di sini, nombor 2 mewakili nisbah 2 / 1, menjadikan lebar elemen dua kali ganda daripada tingginya.

Kelebihan Ciri aspect-ratio

  • Reka Bentuk Responsif Elemen boleh melaraskan saiznya secara automatik sambil mengekalkan nisbah aspek pada pelbagai peranti dan saiz tetingkap.
  • Pelaksanaan Mudah Untuk mengekalkan nisbah tertentu, kaedah tradisional seperti menggunakan padding digunakan, tetapi dengan aspect-ratio, ia boleh ditetapkan dengan lebih mudah.

Penggunaan Sebenar

Sebagai contoh, pemain video seperti YouTube biasanya dipaparkan dengan nisbah aspek 16:9. Untuk mengekalkan nisbah ini, sifat aspect-ratio boleh digunakan untuk mencipta bekas video responsif dengan mudah.

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}
  • Ini membolehkan video mengekalkan nisbah 16:9 pada sebarang peranti.

Ringkasan

  • aspect-ratio adalah sifat yang menentukan nisbah lebar kepada tinggi bagi suatu elemen.
  • Dengan menentukan nisbah, reka bentuk responsif boleh dilaksanakan dengan mudah.
  • Ia sangat berguna untuk elemen yang perlu mengekalkan nisbah aspek tertentu, seperti imej, video, dan susun atur kad.

Berbanding dengan teknik CSS tradisional yang rumit, aspect-ratio terkenal kerana kesederhanaan dan penggunaannya yang intuitif.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

`@media` dan Reka Bentuk Responsif