Articles
Introduction to CSS
`aspect-ratio` Property and Responsive Design

`aspect-ratio` Property and Responsive Design

This article explains the aspect-ratio property and responsive design.

We introduce responsive design techniques using the aspect-ratio property.

YouTube Video

HTML for Preview

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 Property

The aspect-ratio property is used to set the width-to-height ratio (aspect ratio) of an element. This is useful when you want to display an element with a fixed ratio, particularly for media content like images or videos, or in responsive design.

Basic Syntax 

1aspect-ratio: <ratio>;
  • <ratio> specifies the width-to-height ratio. The ratio is written in the format of "width:height" or represented by a single number for the width-to-height ratio.

Example

1:1 Aspect Ratio (Square)

This is how it looks with a 1:1 aspect ratio.

1.square {
2    width: 200px;
3    aspect-ratio: 1 / 1;
4}
  • In this case, elements with the .square class are set to always have equal width and height, displaying as a square.

16:9 Aspect Ratio (Widescreen Videos or Images)

This is how it looks with a 16:9 aspect ratio, often used for widescreen videos or images.

1.widescreen {
2    width: 100%;
3    aspect-ratio: 16 / 9;
4}
  • In this case, elements with the .widescreen class automatically adjust their height according to the width while maintaining a 16:9 aspect ratio.

Specify the Ratio with a Single Number

This is how it looks when specifying the ratio with a single number.

1.custom-ratio {
2    width: 400px;
3    aspect-ratio: 2;
4}
  • Here, the number 2 represents a 2 / 1 ratio, making the element's width twice its height.

Benefits of the aspect-ratio Property

  • Responsive Design The element can automatically adjust its size while maintaining the aspect ratio across different devices and window sizes.
  • Simple Implementation To maintain a specific ratio, traditional methods like using padding were used, but with aspect-ratio, it can be set more simply.

Actual Use Case

For example, video players like YouTube are commonly displayed with a 16:9 aspect ratio. To maintain this ratio, the aspect-ratio property can be used to easily create a responsive video container.

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}
  • This allows videos to maintain a 16:9 ratio on any device.

Summary

  • aspect-ratio is a property that specifies the width-to-height ratio of an element.
  • By specifying a ratio, responsive design can be easily implemented.
  • It is very useful for elements that need to maintain a specific aspect ratio, such as images, videos, and card layouts.

Compared to traditional complex CSS techniques, aspect-ratio is noted for its simplicity and intuitive use.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video

`@media` and Responsive Design