How TO - Aspect Ratio
Learn how to maintain the aspect ratio of an element with CSS.
Aspect Ratio
Create flexible elements that keep their aspect ratio (4:3, 16:9, etc.) when resized:
How To - Height Equal to Width
Step 1) Add HTML:
Use a container element, like <div>, and if you want text inside of it, add a child element:
Example
<div class="container">
<div class="text">Some text</div> <!-- If you want text inside the container -->
</div>
<div class="text">Some text</div> <!-- If you want text inside the container -->
</div>
Step 2) Add CSS:
Add a percentage value for padding-bottom
to maintain the aspect ratio of the
DIV. The following example will create an aspect ratio of 1:1 (the height and
width is always equal):
Example 1:1 Aspect Ratio
.container {
background-color: red;
width: 100%;
padding-top: 100%; /* 1:1 Aspect Ratio */
position: relative; /* If you want text inside of it */
}
/* If you want text inside of the container */
.text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Try it Yourself »
background-color: red;
width: 100%;
padding-top: 100%; /* 1:1 Aspect Ratio */
position: relative; /* If you want text inside of it */
}
/* If you want text inside of the container */
.text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Other aspect ratios:
Example 16:9 Aspect Ratio
.container {
padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
Try it Yourself »
padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
Example 3:2 Aspect Ratio
.container {
padding-top: 66.66%; /* 3:2 Aspect Ratio */
}
Try it Yourself »
padding-top: 66.66%; /* 3:2 Aspect Ratio */
}