.menu
.search
CHECKING STATUS
I AM LISTENING TO
|
  • ♩
  • ♪
  • ♫
  • ♬
  • ♩
  • ♪
  • ♫
  • ♬
HOME / BLOG

Keep Container Ratios with Pure CSS

4. January 2024
/ /
.SHARE

Table of Contents

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:

CSS
1
2
3
4
5
6
7
8
9
10
11
 
.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:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
.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:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
 
.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

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
 
.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:

CSS
1
2
3
4
5
6
7
8
 
.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:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
.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:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
.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!

RELATED POSTS

READ ABOUT IT
 PROJECT

Gutenberg Blocks in Elementor: Seamless Widget Integration

/ / /

Content editing in Elementor Elementor excels at layout-building and design flexibility, but when it comes to long-form content or complex structured text, traditional editors quickly hit their limits. That’s where the Gutenberg Editor — specifically the Isolated Block Editor (IBE) — becomes a game-changer. TinyMCE simply doesn’t hold up inside Elementor, and after years of […]

READ ABOUT IT

Semantic Editors in JavaScript – Lets keep that Code Clean!

/ / / /

If you’ve ever tried to style text in a WYSIWYG editor and ended up with HTML that looked like a spaghetti disaster, you’ve already met the reason why semantic editors meaning, structure, and sanity. In other words: they keep your content clean, organized, and machine-friendly. This article walks you through the most important semantic and […]

READ ABOUT IT

Meet the Isolated Block Editor – Gutenberg, Untethered – Integrated into Elementor

/ / / /

If you’ve ever worked with text editors on the web, you know the routine: dependencies everywhere, fragile integrations, and editors that only behave when the stars align. The Isolated Block Editor (IBE) solves this by taking the core of Gutenberg and making it work anywhere — no WordPress environment required. It gives you the power […]

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.

.series

.highlights

.PROJECT - LEAD
.PROJECTS - I LOVE

PORTALZINE® NMN
Alexander Gräf
Stettiner Str. Nord 20
DE-49624 Löningen

PUSH THE BOUNDARIES OF YOUR PROJECT.