CSS Aspect Ratio Generator

Tailwind CSS

<div class="aspect-video">...</div>
<div class="aspect-square">...</div>
<div class="aspect-[4/3]">...</div>
<div class="aspect-square md:aspect-video lg:aspect-[21/9]">...</div>

Bootstrap 5

<div class="ratio ratio-16x9">...</div>
<div class="ratio ratio-4x3">...</div>
<div class="ratio ratio-1x1">...</div>
<div class="ratio" style="--bs-aspect-ratio: 56.25%;">...</div>

CSS Grid and Flexbox

.grid-item {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.flex-item {
  flex: 1;
  aspect-ratio: 16 / 9;
  min-width: 0;
}

Next.js and React

import Image from 'next/image';

export function ResponsiveImage() {
  return (
    <div style={{ aspectRatio: '16 / 9', position: 'relative' }}>
      <Image src="/hero.jpg" alt="" fill sizes="100vw" style={{ objectFit: 'cover' }} />
    </div>
  );
}

In Next.js the safest CLS pattern is width and height on static images, or `fill` inside a container that already has a known aspect ratio and explicit layout space.

16:9

Responsive YouTube / video embed

The standard 16:9 embed shell for iframes, hosted video, and product demos.

<div class="video-container">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="Video title"
    allowfullscreen
  ></iframe>
</div>

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.video-container iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

16:9

Hero image with CLS prevention

A content hero that reserves space before the image loads and avoids layout shift.

<div class="hero-image">
  <img src="hero.jpg" alt="Hero" width="1920" height="1080">
</div>

.hero-image {
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
}

.hero-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

1:1

Product image grid

Square e-commerce cards where image consistency matters more than cinematic framing.

<div class="product-image">
  <img src="product.jpg" alt="Product name" width="800" height="800">
</div>

.product-image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f5f5f5;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

1.91:1

Social media card preview

Open Graph or social preview cards with a 1.91:1 media area.

<div class="og-preview">
  <div class="og-image">
    <img src="og-image.jpg" alt="Article title" width="1200" height="630">
  </div>
</div>

.og-image {
  aspect-ratio: 1.91 / 1;
  overflow: hidden;
}

.og-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

4:3

Responsive map embed

A 4:3 map shell for location pages and contact sections.

<div class="map-container">
  <iframe src="https://maps.google.com/maps?..." title="Location map" loading="lazy"></iframe>
</div>

.map-container {
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
}

.map-container iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

Mixed

Display ad container

A set of ad-slot ratios for IAB standard placements.

.ad-medium-rect { aspect-ratio: 6 / 5; width: 300px; }
.ad-leaderboard { aspect-ratio: 728 / 90; width: 100%; max-width: 728px; }
.ad-skyscraper { aspect-ratio: 4 / 15; width: 160px; }
.ad-half-page { aspect-ratio: 1 / 2; width: 300px; }
.ad-billboard { aspect-ratio: 97 / 25; width: 100%; max-width: 970px; }

Step 1

Enter the target ratio

Start with either a ratio such as 16:9 or a pixel pair such as 1920 by 1080. The generator will simplify the ratio, calculate the decimal value, and compute the padding-top fallback percentage.

Step 2

Choose the container width

Set the preview width so you can see the real rendered height for the ratio you care about. This is useful when you want a quick pixel-height answer for a fixed-width shell.

Step 3

Pick the output format

Switch between modern CSS, padding fallback, Tailwind, Bootstrap, and React outputs depending on the stack you are shipping. Every tab is built from the same ratio input so the math stays consistent.

Step 4

Enable fallbacks and variables if needed

For legacy support you can include a padding-top fallback. If you want themeable or dynamic values, enable CSS custom-property output and use the generated variable names.

Step 5

Preview the container

Use the live preview to verify the visual shape at different widths before pasting code into production. This is especially helpful for video embeds, hero media, and social cards.

Step 6

Copy the final snippet

Copy the CSS, HTML, combined snippet, or framework example directly from the active tab. The generated code is designed to be production-ready rather than just illustrative.