How to Maintain the Aspect Ratio of a div with CSS

By the end of this page, you will understand how to keep a div at a fixed aspect ratio using CSS. You will learn the modern aspect-ratio property, the older padding-based technique, how layout width affects computed height, and where this pattern is used in real responsive interfaces.

In responsive design, an element often needs to scale while keeping the same shape.

A fixed aspect ratio means the relationship between width and height stays constant. For example:

• 16:9 for videos
• 1:1 for square cards or avatars
• 4:3 for older media

If a box becomes wider, its height should grow in proportion. If it becomes narrower, its height should shrink in the same proportion.

In modern CSS, this is handled directly with the aspect-ratio property. It tells the browser:

“When one dimension changes, calculate the other dimension using this ratio.”

Example:

.box {
  width: 100%;
  aspect-ratio: 16 / 9;
}

If the element ends up being 800px wide, the browser computes the height as 450px.

This matters because responsive layouts often contain:

• video containers
• image placeholders
• embedded maps
• product cards
• dashboard panels
• ad slots

Without a preserved aspect ratio, these elements can stretch, collapse, or create unstable layouts.

Before aspect-ratio was widely supported, developers used a CSS trick based on percentage padding. That older method is still useful to recognize when reading existing codebases.

Think of aspect ratio like enlarging or shrinking a photo.

If the photo keeps its shape, both dimensions scale together. You can make it bigger or smaller, but you do not squash it vertically or stretch it horizontally.

A div with a fixed aspect ratio behaves the same way:

• the width changes because of the layout
• the height is calculated from that width
• the overall shape stays consistent

For a 16:9 box, every 16 units of width must match 9 units of height.

So if the width changes, the height must follow the same proportion.

Modern CSS: aspect-ratio

The simplest solution is:

.box {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: lightblue;
}

<div class="box"></div>

How it works

• width: 100% makes the element responsive relative to its parent.
• aspect-ratio: 16 / 9 tells CSS to keep the width-to-height relationship fixed.
• The browser calculates height automatically.

Example with a max width

.video-frame {
  width: 100%;
  max-width: 640px;
  aspect-ratio: 16 / 9;
  background: #ddd;
}

This creates a responsive box that grows up to wide and always stays in a shape.

Consider this CSS:

.card {
  width: 300px;
  aspect-ratio: 4 / 3;
  background: skyblue;
}

Step by step

1. The browser reads width: 300px.
2. The browser reads aspect-ratio: 4 / 3.
3. That means:
   • for every 4 units of width
   • use 3 units of height
4. Height is calculated as:

height = width × (3 / 4)
height = 300 × 0.75
height = 225px

So the final box size becomes:

• width: 300px
• height: 225px

Responsive version

.card {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 4 / 3;
}

If the parent allows these widths, the computed heights become:

Aspect-ratio preservation is used in many common UI patterns:

• Responsive video containers
  • YouTube or course videos often use 16:9.
• Image placeholders
  • Prevent layout shifts before images load.
• Product cards
  • Keep thumbnails aligned in a grid.
• Profile tiles
  • Square user cards or avatars.
• Maps and embeds
  • Maintain consistent display areas across screen sizes.
• Dashboard widgets
  • Keep chart panels readable and balanced.
• Ad spaces
  • Reserve the correct shape before ad content appears.

Example:

.product-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

This helps all product images appear uniform, even in a flexible grid.

In real projects, developers usually combine aspect ratio with layout constraints and content behavior.

Common patterns

1. Responsive media wrapper

.media {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
}

.media img,
.media iframe,
.media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

This is common for cards, banners, and embedded media.

2. Preventing layout shift

A reserved aspect ratio gives the page a stable layout before content fully loads.

.skeleton-image {
  width: 100%;
  aspect-ratio: 3 / 2;
  background: #e5e5e5;
}

3. Combining with grid or flexbox

1. Setting both width and height manually

If you hard-code both dimensions, the browser may not need the aspect ratio at all.

.box {
  width: 300px;
  height: 300px;
  aspect-ratio: 16 / 9;
}

This can lead to confusing results because the explicit dimensions may override the need for automatic calculation.

Better:

.box {
  width: 300px;
  aspect-ratio: 16 / 9;
}

2. Using the wrong ratio direction

.box {
  aspect-ratio: 9 / 16;
}

This is tall, not wide. For a standard video shape, use:

.box {
  aspect-ratio: 16 / 9;
}

3. Forgetting that content can affect layout

If the content inside is too large, it may overflow or stretch in unexpected ways depending on other styles.

aspect-ratio vs padding trick

• Use aspect-ratio when browser support is acceptable.
• Use the when maintaining older code or supporting older browsers.

Quick syntax

.box {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Common ratios

• 1 / 1 → square
• 4 / 3 → classic photo/video
• 16 / 9 → widescreen video
• 3 / 2 → common image layout

Formula

height = width × (second number / first number)

Example for 16 / 9:

height = width × 9/16

Legacy padding trick

.box {
  height: 0;
  padding-top: 56.25%;
  position: relative;
}

56.25% corresponds to 9 / 16 × 100.

Can I maintain a div's aspect ratio using only CSS?

Yes. The modern CSS way is to use aspect-ratio. Older code may use the percentage padding technique.

What is the CSS property for responsive aspect ratio?

The property is aspect-ratio, for example:

aspect-ratio: 16 / 9;

Does aspect-ratio work without setting both width and height?

Yes. In fact, that is the usual use case. You often set width and let the browser calculate height.

How do I make a square div in CSS?

Use:

.square {
  aspect-ratio: 1 / 1;
}

Then give it a width, such as width: 200px or width: 100%.

What was the old way to keep aspect ratio before aspect-ratio?

Developers used the padding trick, such as padding-top: 56.25% for a 16:9 box.

Why is my image still distorted inside the ratio box?

• Responsive design — Aspect ratio is a core part of making layouts adapt to screen size.
• CSS width and height — These determine how the browser calculates element dimensions.
• Flexbox — Often used with responsive boxes inside flexible layouts.
• CSS Grid — Common for galleries and card layouts where aspect ratio keeps items aligned.
• object-fit — Helps images and videos fill a ratio-controlled box correctly.
• Intrinsic sizing — Related to how browsers determine element size from content and layout rules.
• Media queries — Useful when different aspect ratios are needed at different breakpoints.