Articles
Einführung in CSS
`aspect-ratio`-Eigenschaft und responsives Design

`aspect-ratio`-Eigenschaft und responsives Design

Dieser Artikel erklärt die aspect-ratio-Eigenschaft und responsives Design.

Wir stellen Techniken des responsiven Designs mit der aspect-ratio-Eigenschaft vor.

YouTube Video

HTML zur Vorschau

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-Eigenschaft

Die aspect-ratio-Eigenschaft wird verwendet, um das Breiten-Höhen-Verhältnis (Aspektverhältnis) eines Elements festzulegen. Dies ist nützlich, wenn Sie ein Element mit einem festen Verhältnis anzeigen möchten, insbesondere für Medieninhalte wie Bilder oder Videos oder im responsiven Design.

Grundlegende Syntax 

1aspect-ratio: <ratio>;
  • <ratio> gibt das Breiten-Höhen-Verhältnis an. Das Verhältnis wird im Format "width:height" geschrieben oder durch eine einzelne Zahl für das Breiten-Höhen-Verhältnis dargestellt.

Beispiel

Seitenverhältnis 1:1 (Quadrat)

So sieht es mit einem 1:1-Seitenverhältnis aus.

1.square {
2    width: 200px;
3    aspect-ratio: 1 / 1;
4}
  • In diesem Fall haben Elemente mit der Klasse .square immer die gleiche Breite und Höhe und werden als Quadrat dargestellt.

Seitenverhältnis 16:9 (Breitbild-Videos oder -Bilder)

So sieht es mit einem 16:9-Seitenverhältnis aus, das häufig für Breitbild-Videos oder -Bilder verwendet wird.

1.widescreen {
2    width: 100%;
3    aspect-ratio: 16 / 9;
4}
  • In diesem Fall passen Elemente mit der Klasse .widescreen ihre Höhe automatisch an die Breite an, während sie ein 16:9-Aspektverhältnis beibehalten.

Das Verhältnis mit einer einzelnen Zahl angeben

So sieht es aus, wenn das Seitenverhältnis mit einer einzelnen Zahl angegeben wird.

1.custom-ratio {
2    width: 400px;
3    aspect-ratio: 2;
4}
  • Hier steht die Zahl 2 für ein Verhältnis von 2 / 1, wodurch die Breite des Elements doppelt so groß wie seine Höhe ist.

Vorteile der aspect-ratio-Eigenschaft

  • Responsives Design Das Element kann seine Größe automatisch anpassen und dabei das Seitenverhältnis über verschiedene Geräte und Fenstergrößen hinweg beibehalten.
  • Einfache Implementierung Um ein bestimmtes Seitenverhältnis beizubehalten, wurden bisher herkömmliche Methoden wie die Verwendung von padding eingesetzt, aber mit aspect-ratio kann dies einfacher festgelegt werden.

Tatsächlicher Anwendungsfall

Zum Beispiel werden Videoplayer wie YouTube üblicherweise im Seitenverhältnis 16:9 angezeigt. Um dieses Verhältnis beizubehalten, kann die Eigenschaft aspect-ratio verwendet werden, um einfach einen responsiven Videobereich zu erstellen.

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}
  • Dies ermöglicht es Videos, ein 16:9-Verhältnis auf jedem Gerät beizubehalten.

Zusammenfassung

  • aspect-ratio ist eine Eigenschaft, die das Breiten-Höhen-Verhältnis eines Elements angibt.
  • Durch die Angabe eines Verhältnisses kann ein responsives Design einfach umgesetzt werden.
  • Es ist sehr nützlich für Elemente, die ein bestimmtes Seitenverhältnis beibehalten müssen, wie Bilder, Videos und Kartenlayouts.

Im Vergleich zu traditionellen komplexen CSS-Techniken zeichnet sich aspect-ratio durch seine Einfachheit und intuitive Nutzung aus.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video

`@media` und responsives Design