Keep Container Ratios with Pure CSS

4. Januar 2024

.SHARE

There are several effective CSS techniques to maintain container aspect ratios without JavaScript. Here are the most reliable methods:

1. Aspect-Ratio Property (Modern Approach)

The aspect-ratio CSS property is the cleanest solution for modern browsers:


.container {
  aspect-ratio: 16 / 9; /* Width / Height */
  width: 100%;
}

.container {
  aspect-ratio: 1; /* Square */
  width: 100%;
}

.container {

aspect-ratio: 16 / 9; /* Width / Height */

width: 100%;

}

.container {

aspect-ratio: 1; /* Square */

width: 100%;

}

2. Padding-Bottom Technique (Legacy Support)

This classic method uses padding percentages, which are calculated relative to the container’s width:


.aspect-ratio-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 ratio (9/16 = 0.5625) */
}

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

.aspect-ratio-container {

position: relative;

width: 100%;

height: 0;

padding-bottom: 56.25%; /* 16:9 ratio (9/16 = 0.5625) */

}

.aspect-ratio-content {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

Common ratios:

16:9 = 56.25%
4:3 = 75%
1:1 = 100%
3:2 = 66.67%

3. CSS Grid Approach

Using CSS Grid with aspect-ratio:


.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.grid-item {
  aspect-ratio: 16 / 9;
  background: #f0f0f0;
}

.grid-container {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

gap: 20px;

}

.grid-item {

aspect-ratio: 16 / 9;

background: #f0f0f0;

}

4. Flexbox with Aspect Ratio


.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.flex-item {
  flex: 1 1 300px;
  aspect-ratio: 4 / 3;
  min-width: 0; /* Important for flex shrinking */
}

.flex-container {

display: flex;

flex-wrap: wrap;

gap: 20px;

}

.flex-item {

flex: 1 1 300px;

aspect-ratio: 4 / 3;

min-width: 0; /* Important for flex shrinking */

}

5. Viewport Units Method

For containers relative to viewport size:


.viewport-container {
  width: 80vw;
  height: 45vw; /* Maintains 16:9 ratio with width */
  max-width: 800px;
  max-height: 450px;
}

.viewport-container {

width: 80vw;

height: 45vw; /* Maintains 16:9 ratio with width */

max-width: 800px;

max-height: 450px;

}

6. Container Queries (Cutting Edge)

For truly responsive containers:


.container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .responsive-item {
    aspect-ratio: 16 / 9;
  }
}

@container (max-width: 399px) {
  .responsive-item {
    aspect-ratio: 1 / 1;
  }
}

.container {

container-type: inline-size;

}

@container (min-width: 400px) {

.responsive-item {

aspect-ratio: 16 / 9;

}

@container (max-width: 399px) {

.responsive-item {

aspect-ratio: 1 / 1;

}

Browser Support Considerations

aspect-ratio: Supported in all modern browsers (Chrome 88+, Firefox 89+, Safari 15+)
Padding technique: Universal support, great fallback
Container queries: Limited support, use as progressive enhancement

Recommended Approach

For maximum compatibility, use a combination:


.ratio-container {
  width: 100%;
  
  /* Fallback for older browsers */
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
  
  /* Modern browsers */
  aspect-ratio: 16 / 9;
  height: auto;
  padding-bottom: 0;
}

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

/* Reset for modern browsers */
@supports (aspect-ratio: 1) {
  .ratio-container {
    height: auto;
    padding-bottom: 0;
  }
  
  .ratio-content {
    position: static;
  }
}

.ratio-container {

width: 100%;

/* Fallback for older browsers */

height: 0;

padding-bottom: 56.25%;

position: relative;

/* Modern browsers */

aspect-ratio: 16 / 9;

height: auto;

padding-bottom: 0;

}

.ratio-content {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

/* Reset for modern browsers */

@supports (aspect-ratio: 1) {

.ratio-container {

height: auto;

padding-bottom: 0;

}

.ratio-content {

position: static;

}

This approach provides the modern aspect-ratio benefits while gracefully falling back to the padding technique for older browsers.

Let’s Talk!

Looking for a reliable partner to bring your project to the next level? Whether it’s development, design, security, or ongoing support—I’d love to chat and see how I can help.

Get in touch,
and let’s create something amazing together!

_hyperscript: The Time-Traveling Web Language That Wants You to Just… Talk to Your Browser

Design / Development / Javascript

Or: How I Learned to Stop Worrying and Love the Underscore Remember when you could just tell your computer what to do, in plain English, and it would actually do it? No? Well, grab your DeLorean, because we’re going back to the future with _hyperscript (yes, that underscore is part of the name, and yes, […]

Email Campaign Optimization: What Actually Works

Communication / Consulting / Design / Email / Social Media

So you want better conversion rates from your email campaigns? Great news – I am trying to summarize conversion strategies that don’t require a PhD in marketing, design tricks that actually matter, how to play nice with social media, when to hit send, and the mysterious image-to-text ratio that could be tanking your deliverability. More […]

Best SSH / SFTP Extensions for VSCode in 2025

Development / Automation / Build-Tools / Debugging / Deployment

As Visual Studio Code continues to dominate the code editor landscape in 2025, developers working with remote servers face an important decision: which SFTP extension should they use? The marketplace offers numerous options, but not all extensions are created equal. Some have been abandoned by their maintainers, while others have evolved into robust, actively maintained […]

Alexander

I am a full-stack developer. My expertise include:

Server, Network and Hosting Environments
Data Modeling / Import / Export
Business Logic
API Layer / Action layer / MVC
User Interfaces
User Experience
Understand what the customer and the business needs

I have a deep passion for programming, design, and server architecture—each of these fuels my creativity, and I wouldn’t feel complete without them.

With a broad range of interests, I’m always exploring new technologies and expanding my knowledge wherever needed. The tech world evolves rapidly, and I love staying ahead by embracing the latest innovations.

Beyond technology, I value peace and surround myself with like-minded individuals.

I firmly believe in the principle: Help others, and help will find its way back to you when you need it.

Keep Container Ratios with Pure CSS

Table of Contents

1. Aspect-Ratio Property (Modern Approach)

2. Padding-Bottom Technique (Legacy Support)

3. CSS Grid Approach

4. Flexbox with Aspect Ratio

5. Viewport Units Method

6. Container Queries (Cutting Edge)

Browser Support Considerations

Recommended Approach

RELATED POSTS

_hyperscript: The Time-Traveling Web Language That Wants You to Just… Talk to Your Browser

Email Campaign Optimization: What Actually Works

Best SSH / SFTP Extensions for VSCode in 2025

Alexander

.highlights

.highlights

.highlights