Home / CSS Aspect-Ratio Generator

CSS Aspect-Ratio Generator

Choose a common shape or enter your own width and height. Preview the shape and copy responsive CSS using the modern aspect-ratio property—no fixed pixel height required.

Build your ratio

Common aspect ratios

Width partHeight part

The values are ratio parts, not pixel dimensions. For example, 1920 × 1080 simplifies to 16:9.

Optional CSS selector Image fitting (optional snippet)

Live preview

16 : 9

16:9

Ratio value: 1.7778

Generated CSS

.media-frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

How to use the generated CSS

Choose a preset or enter a custom width-to-height ratio.
Copy the CSS and paste it into your stylesheet.
Apply the selected class to a container or media wrapper.
If using an image, choose object-fit: cover to fill the frame or contain to show the entire image.

The aspect-ratio property sets a preferred width-to-height ratio. The final rendered size still depends on the element’s layout, available width and other CSS rules.

Popular CSS aspect ratios

Ratio	Common use	CSS value
16:9	Video players, widescreen embeds	`aspect-ratio: 16 / 9;`
9:16	Vertical video, mobile canvas	`aspect-ratio: 9 / 16;`
1:1	Square thumbnails, avatars	`aspect-ratio: 1 / 1;`
4:5	Portrait social posts	`aspect-ratio: 4 / 5;`
4:3	Classic video, presentation frames	`aspect-ratio: 4 / 3;`
3:2	Photographs	`aspect-ratio: 3 / 2;`

Need dimensions as pixels too? Try the aspect ratio calculator, or browse the social media image size guide.