Articles
Introduktion til CSS
`aspect-ratio`-egenskaben og responsivt design

`aspect-ratio`-egenskaben og responsivt design

Denne artikel forklarer aspect-ratio-egenskaben og responsivt design.

Vi introducerer teknikker til responsivt design ved brug af aspect-ratio-egenskaben.

YouTube Video

HTML til forhåndsvisning

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 Egenskab

aspect-ratio-egenskaben bruges til at indstille forholdet mellem bredde og højde (aspektforholdet) for et element. Dette er nyttigt, når du vil vise et element med et fast forhold, især for medieindhold som billeder eller videoer, eller i responsivt design.

Grundlæggende syntaks 

1aspect-ratio: <ratio>;
  • <ratio> specificerer bredden-til-højdeforholdet. Forholdet skrives i formatet "bredde:højde" eller repræsenteres af et enkelt tal som bredden-til-højdeforhold.

Eksempel

1:1 formatforhold (Firkantet)

Sådan ser det ud med et 1:1 formatforhold.

1.square {
2    width: 200px;
3    aspect-ratio: 1 / 1;
4}
  • I dette tilfælde er elementer med .square-klassen sat til altid at have samme bredde og højde og vises som en firkant.

16:9 formatforhold (Bredformat videoer eller billeder)

Sådan ser det ud med et 16:9 formatforhold, som ofte bruges til bredformatvideoer eller billeder.

1.widescreen {
2    width: 100%;
3    aspect-ratio: 16 / 9;
4}
  • I dette tilfælde justerer elementer med .widescreen-klassen automatisk deres højde i forhold til bredden, mens de opretholder et 16:9 aspektforhold.

Angiv formatforholdet med et enkelt tal

Sådan ser det ud, når man angiver formatforholdet med et enkelt tal.

1.custom-ratio {
2    width: 400px;
3    aspect-ratio: 2;
4}
  • Her repræsenterer tallet 2 et 2 / 1 forhold, hvilket betyder, at elementets bredde er dobbelt så stor som dets højde.

Fordele ved aspect-ratio Egenskaben

  • Responsivt design Elementet kan automatisk justere sin størrelse og samtidig opretholde formatforholdet på tværs af forskellige enheder og vinduesstørrelser.
  • Enkel implementering For at opretholde et specifikt formatforhold brugte man traditionelle metoder som padding, men med aspect-ratio kan det sættes mere enkelt.

Faktisk Brugsområde

For eksempel vises videospillere som YouTube ofte med et 16:9 formatforhold. For at opretholde dette forhold kan aspect-ratio-egenskaben bruges til nemt at skabe en responsiv videobeholder.

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}
  • Dette gør det muligt for videoer at opretholde et 16:9-forhold på enhver enhed.

Sammendrag

  • aspect-ratio er en egenskab, der angiver bredden-til-højden-forholdet for et element.
  • Ved at angive et forhold kan responsivt design nemt implementeres.
  • Det er meget nyttigt for elementer, der skal opretholde et specifikt billedforhold, såsom billeder, videoer og kortlayouts.

Sammenlignet med traditionelle komplekse CSS-teknikker er aspect-ratio kendt for sin enkelhed og intuitive brug.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video

`@media` og responsivt design