Articles
Giới thiệu về CSS
`aspect-ratio` và Thiết kế đáp ứng

`aspect-ratio` và Thiết kế đáp ứng

Bài viết này giải thích về thuộc tính aspect-ratio và thiết kế đáp ứng.

Chúng tôi giới thiệu các kỹ thuật thiết kế đáp ứng sử dụng thuộc tính aspect-ratio.

YouTube Video

HTML để Xem trước

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>

Thuộc tính aspect-ratio

Thuộc tính aspect-ratio được sử dụng để đặt tỷ lệ chiều rộng so với chiều cao (tỷ lệ khung hình) của một phần tử. Điều này hữu ích khi bạn muốn hiển thị một phần tử với tỷ lệ cố định, đặc biệt đối với nội dung đa phương tiện như hình ảnh hoặc video, hoặc trong thiết kế responsive.

Cú pháp Cơ bản 

1aspect-ratio: <ratio>;
  • <ratio> xác định tỷ lệ chiều rộng so với chiều cao. Tỷ lệ được viết theo định dạng "width:height" hoặc được biểu thị bằng một số duy nhất cho tỷ lệ chiều rộng so với chiều cao.

Ví dụ

Tỷ lệ khung hình 1:1 (Hình vuông)

Đây là cách hiển thị với tỷ lệ khung hình 1:1.

1.square {
2    width: 200px;
3    aspect-ratio: 1 / 1;
4}
  • Trong trường hợp này, các phần tử có class .square sẽ luôn có chiều rộng và chiều cao bằng nhau, hiển thị thành hình vuông.

Tỷ lệ khung hình 16:9 (Video hoặc hình ảnh màn hình rộng)

Đây là cách hiển thị với tỷ lệ khung hình 16:9, thường được sử dụng cho video hoặc hình ảnh màn hình rộng.

1.widescreen {
2    width: 100%;
3    aspect-ratio: 16 / 9;
4}
  • Trong trường hợp này, các phần tử có lớp .widescreen tự động điều chỉnh chiều cao theo chiều rộng trong khi duy trì tỷ lệ khung hình 16:9.

Chỉ định tỷ lệ với một số duy nhất

Đây là cách hiển thị khi chỉ định tỷ lệ bằng một số duy nhất.

1.custom-ratio {
2    width: 400px;
3    aspect-ratio: 2;
4}
  • Ở đây, số 2 biểu thị tỷ lệ 2 / 1, khiến chiều rộng của phần tử lớn gấp đôi chiều cao của nó.

Lợi ích của thuộc tính aspect-ratio

  • Thiết kế đáp ứng Phần tử có thể tự động điều chỉnh kích thước trong khi vẫn giữ nguyên tỷ lệ khung hình trên nhiều thiết bị và kích thước cửa sổ khác nhau.
  • Triển khai đơn giản Để duy trì một tỷ lệ nhất định, các phương pháp truyền thống như sử dụng padding đã được sử dụng, nhưng với aspect-ratio, nó có thể được thiết lập đơn giản hơn.

Trường hợp sử dụng thực tế

Ví dụ, trình phát video như YouTube thường hiển thị với tỷ lệ khung hình 16:9. Để duy trì tỷ lệ này, thuộc tính aspect-ratio có thể được sử dụng để dễ dàng tạo một khung chứa video đáp ứng.

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}
  • Điều này cho phép video duy trì tỷ lệ 16:9 trên bất kỳ thiết bị nào.

Tóm tắt

  • aspect-ratio là một thuộc tính xác định tỷ lệ chiều rộng so với chiều cao của một phần tử.
  • Bằng cách chỉ định một tỷ lệ, thiết kế đáp ứng có thể được thực hiện dễ dàng.
  • Thuộc tính này rất hữu ích cho các phần tử cần duy trì một tỷ lệ khung hình cụ thể, chẳng hạn như hình ảnh, video và bố cục thẻ.

So với các kỹ thuật CSS phức tạp truyền thống, aspect-ratio được đánh giá cao về sự đơn giản và dễ sử dụng.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

`@media` và Thiết Kế Đáp Ứng