Question
I want to create a responsive div whose width and height change as the browser window changes size.
Is there a CSS-only way to make the height automatically adjust based on the width while keeping the same aspect ratio?
I know this can be done with JavaScript, but I would prefer a pure CSS solution.
Short Answer
By the end of this page, you will understand how to keep a div responsive while preserving its aspect ratio using CSS. You will learn the modern aspect-ratio property, the older padding-based fallback technique, when to use each approach, and how this pattern appears in real layouts such as videos, cards, banners, and image placeholders.
Concept
A responsive element changes size based on the available space. Sometimes, when its width changes, you also want its height to change in a fixed proportion.
That fixed proportion is called the aspect ratio.
For example:
1 / 1means a square16 / 9means a widescreen rectangle4 / 3means a more traditional display shape
If a div keeps the same aspect ratio, it will scale up or down without looking stretched or squashed.
In modern CSS, the simplest way to do this is with the aspect-ratio property:
.box {
width: 100%;
aspect-ratio: 16 / 9;
}
This tells the browser:
- let the width respond to the layout
- calculate the height automatically from the ratio
This matters because many UI elements need predictable proportions:
- video containers
- image placeholders before content loads
- profile cards
- embedded maps
- hero banners
- gallery thumbnails
Before aspect-ratio was widely supported, developers often used a CSS trick based on percentage padding. That older method is still useful when you need to support older browsers or understand existing codebases.
Mental Model
Think of aspect ratio like resizing a photo inside a frame.
If the frame is always 16:9, then making it wider also makes it taller in the correct proportion. You are not choosing width and height separately every time. You are choosing one size, and the other size is calculated automatically.
A simple way to think about it:
- width is the input
- aspect ratio is the rule
- height is the result
So instead of saying:
- width =
400px - height =
225px
You say:
- width = whatever fits
- ratio =
16 / 9
Then CSS works out the height for you.
Syntax and Examples
Modern CSS: aspect-ratio
The easiest solution is:
.box {
width: 100%;
aspect-ratio: 16 / 9;
background: steelblue;
}
This creates a box that:
- fills the available width
- keeps a
16:9shape - adjusts height automatically
Example: fixed max width
<div class="box"></div>
.box {
width: 100%;
max-width: 500px;
aspect-ratio: 4 / 3;
background: coral;
}
If the element becomes 400px wide, its height becomes 300px.
Common ratios
Step by Step Execution
Consider this CSS:
<div class="card"></div>
.card {
width: 300px;
aspect-ratio: 3 / 2;
background: tomato;
}
Here is what happens step by step:
-
The browser reads
width: 300px- So the element's width is
300px
- So the element's width is
-
The browser reads
aspect-ratio: 3 / 2- This means width : height =
3 : 2
- This means width : height =
-
The browser calculates the height
height = width × (2 / 3)height = 300 × (2 / 3)height = 200px
-
The box is rendered as
300px × 200px
Real World Use Cases
Aspect ratio control is common in real interfaces.
Video and media embeds
A video player should stay 16:9 on phones, tablets, and desktops.
.video-frame {
width: 100%;
aspect-ratio: 16 / 9;
}
Product cards and gallery thumbnails
A grid looks cleaner when all items keep the same proportions.
.thumbnail {
aspect-ratio: 1 / 1;
object-fit: cover;
}
Hero banners
A large banner may need a wide ratio so it scales smoothly on different screens.
Skeleton loaders and placeholders
Before content loads, reserving space prevents layout shifts.
Maps, charts, and dashboards
Embedded content often needs a stable frame to avoid awkward resizing.
Social media preview areas
Card previews often need fixed proportions for consistent design.
Real Codebase Usage
In real projects, developers usually combine aspect ratio with other layout rules.
Pattern: responsive container with limits
.preview {
width: 100%;
max-width: 720px;
aspect-ratio: 16 / 9;
}
This keeps the element flexible but stops it from growing too large.
Pattern: media that fills the ratio box
<div class="media-card">
<img src="photo.jpg" alt="Example">
</div>
.media-card {
aspect-ratio: 4 / 3;
overflow: hidden;
}
.media-card img {
width: 100%;
height: 100%;
object-fit: cover;
}
This is very common in image grids.
Common Mistakes
1. Setting both width and height manually
If you force both values, the ratio cannot adapt freely.
Problem
.box {
width: 100%;
height: 300px;
aspect-ratio: 16 / 9;
}
The fixed height may override the flexible sizing you want.
Better
.box {
width: 100%;
aspect-ratio: 16 / 9;
}
2. Calculating the padding percentage incorrectly
For the padding trick, use:
height / width × 100
For 16:9, that is:
9 / 16 × 100 = 56.25%
Not 16 / 9.
3. Forgetting position: relative in the padding method
Without it, absolutely positioned inner content may not stay inside the box.
Comparisons
| Approach | How it works | Best for | Pros | Cons |
|---|---|---|---|---|
aspect-ratio | Browser calculates height from width and ratio | Modern projects | Simple, readable, built into CSS | Older browsers may need fallback |
| Padding trick | Uses percentage padding based on width | Legacy support | Works in older code patterns | More confusing, needs extra structure |
| JavaScript resizing | Script measures and updates size | Special dynamic cases | Very flexible | More code, unnecessary for basic ratio layout |
aspect-ratio vs fixed height
Cheat Sheet
Quick syntax
.box {
width: 100%;
aspect-ratio: 16 / 9;
}
Common ratios
aspect-ratio: 1 / 1; /* square */
aspect-ratio: 4 / 3; /* classic */
aspect-ratio: 3 / 2; /* photo */
aspect-ratio: 16 / 9; /* widescreen */
Formula for old padding trick
padding-top = (height / width) * 100%
Examples:
16:9→9 / 16 * 100 = 56.25%4:3→3 / 4 * 100 = 75%1:1→100%
FAQ
Can I maintain a div aspect ratio using only CSS?
Yes. The modern solution is the aspect-ratio property. Older layouts may use the percentage padding trick.
What is the easiest CSS property for responsive aspect ratio?
aspect-ratio is the simplest and most readable option.
Does aspect-ratio work on div elements?
Yes. It works on normal block elements like div, as well as images and other boxes.
How do I create a 16:9 responsive box in CSS?
Use:
.box {
width: 100%;
aspect-ratio: 16 / 9;
}
What percentage padding is used for a 16:9 box?
Use 56.25%, because 9 / 16 × 100 = 56.25.
Should I use JavaScript to maintain aspect ratio?
Usually no. CSS is enough for standard responsive ratio layouts.
Why is my content overflowing the aspect-ratio box?
The box size is correct, but inner content may need additional rules like , , , or .
Mini Project
Description
Build a responsive video-style card that always keeps a 16:9 aspect ratio. This project demonstrates how to create a scalable container for media, banners, or dashboard widgets without using JavaScript.
Goal
Create a responsive card component that keeps a 16:9 ratio, centers text inside it, and scales smoothly as the page width changes.
Requirements
- Create a container that is responsive and does not exceed a maximum width.
- Make the container keep a
16:9aspect ratio using CSS. - Place content inside the box and center it both horizontally and vertically.
- Add simple visual styling such as background color, rounded corners, and text color.
- Include a fallback example using the padding technique.
Keep learning
Related questions
Can You Style Half a Character in CSS? Text Effects with CSS and JavaScript
Learn how to style half of a character using CSS and JavaScript, including overlay techniques for dynamic text effects.
Check If a Checkbox Is Checked with jQuery
Learn how to check whether a checkbox is checked in jQuery using the correct selector, with examples, mistakes, and practical patterns.
Convert HTML and CSS to PDF in PHP: Options, Limits, and Practical Approaches
Learn how HTML-to-PDF conversion works in PHP, why CSS support varies, and how to choose a practical approach for Linux web servers.