Articles
Introduktion till CSS
`aspect-ratio`-egenskapen och responsiv design

`aspect-ratio`-egenskapen och responsiv design

Denna artikel förklarar aspect-ratio-egenskapen och responsiv design.

Vi introducerar tekniker för responsiv design med hjälp av aspect-ratio-egenskapen.

YouTube Video

HTML för förhandsgranskning

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 Egenskap

aspect-ratio-egenskapen används för att ställa in förhållandet mellan bredd och höjd (aspektförhållande) för ett element. Detta är användbart när du vill visa ett element med ett fast förhållande, särskilt för medier som bilder eller videor, eller i responsiv design.

Grundläggande syntax 

1aspect-ratio: <ratio>;
  • <ratio> anger förhållandet mellan bredd och höjd. Förhållandet skrivs i formatet "bredd:höjd" eller representeras av ett enda tal för bredd-höjd-förhållandet.

Exempel

1:1 bildförhållande (kvadratisk)

Så här ser det ut med ett 1:1-bildförhållande.

1.square {
2    width: 200px;
3    aspect-ratio: 1 / 1;
4}
  • I detta fall ställs element med klassen .square in så att de alltid har lika bredd och höjd, och visas som en fyrkant.

16:9 bildförhållande (bredbildsvideor eller -bilder)

Så här ser det ut med ett 16:9-bildförhållande, vilket ofta används för bredbildsvideor eller -bilder.

1.widescreen {
2    width: 100%;
3    aspect-ratio: 16 / 9;
4}
  • I detta fall justerar element med klassen .widescreen automatiskt sin höjd enligt bredden, samtidigt som ett 16:9-aspektförhållande bibehålls.

Ange förhållandet med ett enda tal

Så här ser det ut när man anger förhållandet med ett enda tal.

1.custom-ratio {
2    width: 400px;
3    aspect-ratio: 2;
4}
  • Här representerar talet 2 ett förhållande på 2 / 1, vilket gör elementets bredd dubbelt så stort som dess höjd.

Fördelar med aspect-ratio-egenskapen

  • Responsiv design Elementet kan automatiskt justera storleken medan bildförhållandet bibehålls på olika enheter och fönsterstorlekar.
  • Enkel implementering För att behålla ett specifikt förhållande har traditionella metoder som padding använts, men med aspect-ratio kan det ställas in enklare.

Faktisk användningsfall

Till exempel visas videospelare som YouTube vanligtvis med ett 16:9-bildförhållande. För att upprätthålla detta förhållande kan egenskapen aspect-ratio användas för att enkelt skapa en responsiv videobehållare.

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}
  • Detta gör att videor kan bibehålla ett förhållande på 16:9 på alla enheter.

Sammanfattning

  • aspect-ratio är en egenskap som anger förhållandet mellan bredd och höjd för ett element.
  • Genom att ange ett förhållande kan responsiv design enkelt implementeras.
  • Det är mycket användbart för element som behöver bibehålla ett specifikt bildförhållande, såsom bilder, videor och kortlayout.

Jämfört med traditionella komplexa CSS-tekniker är aspect-ratio känt för sin enkelhet och intuitiva användning.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video

`@media` och responsiv design