Articles
Introductie tot CSS
`aspect-ratio`-eigenschap en responsief ontwerp

`aspect-ratio`-eigenschap en responsief ontwerp

Dit artikel legt de aspect-ratio-eigenschap en responsief ontwerp uit.

We introduceren technieken voor responsief ontwerp met behulp van de aspect-ratio-eigenschap.

YouTube Video

HTML voor Voorbeeldweergave

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 Eigenschap

De aspect-ratio eigenschap wordt gebruikt om de breedte-hoogteverhouding (beeldverhouding) van een element in te stellen. Dit is handig als je een element met een vaste verhouding wilt weergeven, vooral voor mediacontent zoals afbeeldingen of video's, of in responsief ontwerp.

Basis Syntax 

1aspect-ratio: <ratio>;
  • <ratio> specificeert de breedte-hoogteverhouding. De verhouding wordt geschreven in het formaat "breedte:hoogte" of weergegeven door een enkel getal voor de breedte-hoogteverhouding.

Voorbeeld

1:1 beeldverhouding (vierkant)

Zo ziet het eruit met een 1:1 beeldverhouding.

1.square {
2    width: 200px;
3    aspect-ratio: 1 / 1;
4}
  • In dit geval zijn elementen met de .square-klasse altijd ingesteld op gelijke breedte en hoogte, zodat ze als een vierkant worden weergegeven.

16:9 beeldverhouding (breedbeeldvideo's of -afbeeldingen)

Zo ziet het eruit met een 16:9 beeldverhouding, die vaak wordt gebruikt voor breedbeeldvideo's of -afbeeldingen.

1.widescreen {
2    width: 100%;
3    aspect-ratio: 16 / 9;
4}
  • In dit geval passen elementen met de klasse .widescreen hun hoogte automatisch aan volgens de breedte, terwijl ze de 16:9 beeldverhouding behouden.

De verhouding specificeren met één getal

Zo ziet het eruit wanneer de verhouding met één getal wordt gespecificeerd.

1.custom-ratio {
2    width: 400px;
3    aspect-ratio: 2;
4}
  • Hier staat het getal 2 voor een verhouding van 2 / 1, waardoor de breedte van het element twee keer zo groot is als de hoogte.

Voordelen van de aspect-ratio Eigenschap

  • Responsief ontwerp Het element kan zijn grootte automatisch aanpassen terwijl de beeldverhouding behouden blijft op verschillende apparaten en schermformaten.
  • Eenvoudige implementatie Om een specifieke verhouding te behouden werd traditioneel gebruik gemaakt van technieken zoals padding, maar met aspect-ratio kan dit eenvoudiger worden ingesteld.

Werkelijk Gebruiksvoorbeeld

Videospelers zoals YouTube worden bijvoorbeeld vaak weergegeven met een 16:9 beeldverhouding. Om deze verhouding te behouden, kan de eigenschap aspect-ratio worden gebruikt om eenvoudig een responsieve videohouder te maken.

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}
  • Hiermee kunnen video's op elk apparaat een 16:9-verhouding behouden.

Samenvatting

  • aspect-ratio is een eigenschap die de breedte-hoogteverhouding van een element bepaalt.
  • Door een verhouding op te geven, kan responsief ontwerp eenvoudig worden geïmplementeerd.
  • Het is erg handig voor elementen die een specifieke beeldverhouding moeten behouden, zoals afbeeldingen, video's en kaartindelingen.

In vergelijking met traditionele complexe CSS-technieken wordt aspect-ratio geprezen om zijn eenvoud en intuïtief gebruik.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video

`@media` en Responsive Design