Keep Container Ratios with Pure CSS

LAST MODIFIED: 30. August 2025

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!

Vikunja – Style / Themed

Communication / Consulting / Deployment / Design / Development / Docker / Inspiration / Project Management

Spend a lot of time with Vikunja (cubicFUSION Vikunja Importer) lately, one thing that it is currently missing is an easy way to style the interface. Especially the task view is just one long page without any clear section separation. LET’S TWEAK IT Here a quick starting point to tweak the style quickly. You can […]

Day 50: Resilio Sync – Private Peer-to-Peer File Synchronization – 7 Days of Docker

Development / Automation / Cross Platform / Deployment / Docker / Hosting

File synchronization is usually treated as a cloud problem. Put the folder in Dropbox, Google Drive, OneDrive, or iCloud, wait for everything to upload, and hope the storage quota, privacy model, transfer speed, and client support all line up with your workflow. That works for office documents. It gets awkward fast when you are syncing […]

cubicFUSION Hexagon Grid

Development / CSS / Design / HTML5 / Javascript / WordPress

An Elementor widget that renders a fully configurable honeycomb grid. Each hexagon cell carries an icon or image, title, text, and a link. The grid supports two orientations, responsive column and size controls, rounded corners, hover effects, hover-reveal modes, per-cell style overrides, a media-gallery source with lightbox, auto-fit columns, background fill, and drop shadows. Content […]

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

Vikunja – Style / Themed

Day 50: Resilio Sync – Private Peer-to-Peer File Synchronization – 7 Days of Docker

cubicFUSION Hexagon Grid

Alexander

.highlights

.series

.highlights

.series

.highlights