Articles
Introduction au CSS
Propriété `aspect-ratio` et conception réactive

Propriété `aspect-ratio` et conception réactive

Cet article explique la propriété aspect-ratio et la conception réactive.

Nous présentons des techniques de conception réactive utilisant la propriété aspect-ratio.

YouTube Video

HTML pour l'aperçu

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>

Propriété aspect-ratio

La propriété aspect-ratio est utilisée pour définir le rapport largeur/hauteur (ratio) d'un élément. Ceci est utile lorsque vous voulez afficher un élément avec un ratio fixe, en particulier pour du contenu multimédia comme des images ou des vidéos, ou dans un design réactif.

Syntaxe de base 

1aspect-ratio: <ratio>;
  • <ratio> spécifie le rapport largeur/hauteur. Le ratio est écrit au format "largeur:hauteur" ou représenté par un seul nombre pour le rapport largeur/hauteur.

Exemple

Ratio d'aspect 1:1 (Carré)

Voici comment cela apparaît avec un ratio d'aspect 1:1.

1.square {
2    width: 200px;
3    aspect-ratio: 1 / 1;
4}
  • Dans ce cas, les éléments ayant la classe .square ont toujours une largeur et une hauteur égales, s'affichant ainsi en carré.

Ratio d'aspect 16:9 (Vidéos et images grand écran)

Voici comment cela apparaît avec un ratio d'aspect 16:9, souvent utilisé pour les vidéos ou images en grand écran.

1.widescreen {
2    width: 100%;
3    aspect-ratio: 16 / 9;
4}
  • Dans ce cas, les éléments avec la classe .widescreen ajustent automatiquement leur hauteur en fonction de la largeur tout en conservant un ratio 16:9.

Spécifier le ratio avec un seul nombre

Voici comment cela apparaît lorsqu'on spécifie le ratio avec un seul nombre.

1.custom-ratio {
2    width: 400px;
3    aspect-ratio: 2;
4}
  • Ici, le nombre 2 représente un ratio 2 / 1, ce qui rend la largeur de l'élément deux fois plus grande que sa hauteur.

Avantages de la propriété aspect-ratio

  • Design réactif L'élément peut ajuster automatiquement sa taille tout en maintenant le ratio d'aspect sur différents appareils et tailles de fenêtres.
  • Implémentation simple Pour maintenir un ratio spécifique, on utilisait traditionnellement des méthodes comme le padding, mais avec aspect-ratio, cela peut être défini plus simplement.

Cas d'utilisation réel

Par exemple, les lecteurs vidéo comme YouTube sont généralement affichés avec un ratio d'aspect 16:9. Pour maintenir ce rapport, la propriété aspect-ratio peut être utilisée pour créer facilement un conteneur vidéo réactif.

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}
  • Cela permet aux vidéos de conserver un rapport 16:9 sur n'importe quel appareil.

Résumé

  • aspect-ratio est une propriété qui spécifie le rapport largeur/hauteur d'un élément.
  • En spécifiant un rapport, le design adaptatif peut être facilement mis en œuvre.
  • C'est très utile pour les éléments qui doivent conserver un rapport d'aspect spécifique, comme les images, les vidéos et les mises en page de cartes.

Comparée aux techniques CSS complexes traditionnelles, la propriété aspect-ratio se distingue par sa simplicité et son utilisation intuitive.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video

`@media` et Conception Réactive