Loading...
Loading...
By continuing to use the platform, you accept the terms of the Privacy Policy and the use of cookies.
👋 Hi! I'm Dastan, author of Hack Frontend. Always open to professional networking => connect with me on LinkedIn.
aspect-ratio is a CSS property that allows you to set the aspect ratio of an element, automatically calculating one of the dimensions based on the other. This is especially useful for creating responsive images, videos, and containers.
aspect-ratio defines the preferred ratio of width to height of an element. The browser automatically calculates one of the dimensions if the other is set.
.element {
aspect-ratio: 16 / 9; /* width / height */
aspect-ratio: 1 / 1; /* square */
aspect-ratio: 4 / 3; /* classic ratio */
aspect-ratio: auto; /* default */
}
.video-container {
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
}
Result: Container will always have a 16:9 aspect ratio, regardless of screen width.
.image-wrapper {
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
}
| Ratio | CSS Value | Usage |
|---|---|---|
| 1:1 | aspect-ratio: 1 / 1 | Square images, avatars |
| 4:3 | aspect-ratio: 4 / 3 | Classic photos, old monitors |
| 16:9 | aspect-ratio: 16 / 9 | Videos, modern screens |
| 21:9 | aspect-ratio: 21 / 9 | Ultrawide screens, cinematic format |
| 3:2 | aspect-ratio: 3 / 2 | Photos, printing |
<div class="video-wrapper">
<iframe
src="https://www.youtube.com/embed/..."
frameborder="0"
allowfullscreen>
</iframe>
</div>
.video-wrapper {
width: 100%;
aspect-ratio: 16 / 9;
position: relative;
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="product-grid">
<div class="product-card">
<div class="product-image">
<img src="product.jpg" alt="Product">
</div>
<div class="product-info">
<h3>Product Name</h3>
<p>Price: $100</p>
</div>
</div>
</div>
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.5rem;
}
.product-card {
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
}
.product-image {
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #f0f0f0;
}
.product-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.gallery-item {
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 8px;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.gallery-item:hover img {
transform: scale(1.1);
}
.responsive-container {
width: 100%;
max-width: 800px;
aspect-ratio: 16 / 9;
}
.content-box {
width: 100%;
aspect-ratio: 1 / 1;
padding: 1rem;
box-sizing: border-box;
}
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.grid-item {
aspect-ratio: 1 / 1;
background: #f0f0f0;
}
If both width and height are set, aspect-ratio may be overridden:
.element {
width: 300px;
height: 200px;
aspect-ratio: 1 / 1; /* ignored, as both sizes are set */
}
For aspect-ratio to work, you need to set only one dimension:
.element {
width: 300px;
/* height not set */
aspect-ratio: 1 / 1; /* height will be 300px */
}
For browsers that don't support aspect-ratio, you can use the padding trick:
.aspect-ratio-box {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 = 9/16 * 100% */
}
.aspect-ratio-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Modern approach */
@supports (aspect-ratio: 1) {
.aspect-ratio-box {
padding-bottom: 0;
aspect-ratio: 16 / 9;
}
}
:root {
--video-ratio: 16 / 9;
--image-ratio: 4 / 3;
}
.video {
aspect-ratio: var(--video-ratio);
}
.image {
aspect-ratio: var(--image-ratio);
}
aspect-ratio is supported in:
For older browsers, use the padding trick or polyfill.
Tip:
Use aspect-ratio to create responsive containers, especially for images and videos. This is a modern and elegant way to control aspect ratios without needing to set fixed sizes.