html
/

CSS Aspect Ratio

Last Sync: Today

On this page

10
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

html

CSS Aspect Ratio

What is Aspect Ratio?

The aspect-ratio property defines the proportional relationship between width and height of an element.

Basic Syntax

CSSRead-only
1
div {
  aspect-ratio: 16 / 9;
}

Example

CSSRead-only
1
.box {
  width: 300px;
  aspect-ratio: 1 / 1;
  background: lightblue;
}

Responsive Usage

CSSRead-only
1
img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

Common Ratios

RatioUse Case
1:1Square images
16:9Videos, banners
4:3Older screens
21:9Wide screens

Aspect Ratio with Height

CSSRead-only
1
.box {
  height: 200px;
  aspect-ratio: 2 / 1;
}

Fallback (Older Method)

CSSRead-only
1
.container {
  position: relative;
  padding-top: 56.25%; /* 16:9 */
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Best Practices

  • Use aspect-ratio for responsive design
  • Combine with width for better control
  • Use object-fit for images/videos
  • Avoid fixed heights when using aspect-ratio

Common Mistakes

  • Using both fixed width and height
  • Not using object-fit for media
  • Ignoring responsive behavior
  • Incorrect ratio values

Conclusion

CSS aspect-ratio simplifies maintaining consistent proportions. It is essential for responsive layouts and modern UI design.

Try it yourself

.box {
  width: 200px;
  aspect-ratio: 16 / 9;
  background: lightblue;
}

Test Your Knowledge

Q1
of 3

Which defines proportion?

A
width
B
height
C
aspect-ratio
D
display
Q2
of 3

Which is video ratio?

A
1:1
B
16:9
C
4:4
D
2:1
Q3
of 3

Which helps images fit?

A
display
B
object-fit
C
position
D
overflow

Frequently Asked Questions

What is aspect-ratio?

Defines width-to-height proportion.

Why use it?

To maintain consistent layout without hacks.

Does it work with images?

Yes, especially with object-fit.

Previous

css object fit

Next

css best practices

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.