Articles
CSS简介
`aspect-ratio` 属性与响应式设计

`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: &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 属性用于设置元素的宽高比（纵横比）。当您希望以固定比例显示元素时，该属性非常有用，特别是针对图像或视频等媒体内容或响应式设计。

基本语法 

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 属性的优点

  • 响应式设计 该元素可以在不同设备和窗口尺寸下保持纵横比并自动调整大小。
  • 简单实现 为了保持特定比例，传统方法是使用 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频道。

YouTube Video

`@media` 与响应式设计CSS 和 BEM