`aspect-ratio` 屬性與響應式設計
本文將說明 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: <ratio>;
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<div class="video-container">
82 <iframe src="https://www.youtube.com/embed/example"></iframe>
83</div>
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 屬性被用來設置元素的寬高比例（長寬比）。當您需要以固定比例顯示元素時，這非常有用，特別是對於圖片或影片等媒體內容，或響應式設計中。
基本語法
1aspect-ratio: <ratio>;<ratio>用來指定寬高比例。比例以 "width:height" 格式撰寫，或者使用單個數字表示寬高比例。
範例
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 屬性的優勢
- 響應式設計 該元素可以在不同裝置和視窗尺寸下，自動調整大小，同時保持長寬比。
- 簡單實作
為了維持特定的長寬比，過去會用
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 因其簡單和直觀的使用而備受推崇。
您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。