CSSaspect-ratioResponsive DesignImages

CSS aspect-ratio: Responsive Media Containers Done Right

The aspect-ratio property eliminated the padding-top hack forever. Learn how to use it for images, videos, cards, thumbnails, and creating perfectly proportioned layout elements.

U

UIXplor Team

February 25, 2026 · 4 min read

✦

01The Old Way vs The New Way

Before: The 'padding-top hack' for 16:9 videos:

css
.video-wrap { position: relative; padding-top: 56.25%; }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

Now: One CSS property:

css
.video-wrap { aspect-ratio: 16 / 9; width: 100%; }
.video-wrap iframe { width: 100%; height: 100%; }

02Common Ratios

css
.square      { aspect-ratio: 1; }
.video       { aspect-ratio: 16 / 9; }
.photo       { aspect-ratio: 4 / 3; }
.portrait    { aspect-ratio: 3 / 4; }
.cinema      { aspect-ratio: 21 / 9; }
.og-image    { aspect-ratio: 1200 / 630; }

03With object-fit for Images

css
.thumbnail {
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
}
.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* crop to fill */
  object-position: center;
}

`object-fit: cover` ensures the image fills the container without distortion, cropping edges as needed.

Related UI Components

◈

Collections

All UI component collections

Back to Blog