Prowid logo — programming courses PROWIDIT Education Academy
CSS Free, no sign-up

CSS aspect-ratio & object-fit Generator

Tired of distorted squished images or annoying Cumulative Layout Shifts (CLS) while assets load? The modern aspect-ratio and object-fit: cover duo solves responsive media layout once and for all.

Result
Ready-made CSS 
/* Müasir responsiv media bloku */
.media-card {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 16 / 9; /* Sıfır CLS sıçrayışı */
  overflow: hidden;
  border-radius: 12px;
}

.media-card img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Təhrif olmadan kəsilir */
  object-position: 50% 50%; /* Fokus mərkəzi */
}

How to use it

  1. Select a preset aspect ratio (16:9 video, 1:1 avatar, 4:3 classic photo, 9:16 vertical Shorts, or 21:9 ultrawide).
  2. Toggle the object-fit mode (cover, contain, fill, none) and compare clean cropping against distorted stretching.
  3. Click anywhere on the preview image to pin the object-position focal point crosshair.
  4. Resize the container with the width slider, review CLS diagnostic metrics, and copy production-ready CSS.

How it works

What does aspect-ratio do?

The aspect-ratio property establishes a preferred aspect ratio for the box (width / height), such as 16 / 9 or 1 / 1. It supersedes archaic padding-top: 56.25% percentage hacks, enabling the browser to immediately reserve the exact layout box before network media arrives.

Eliminating Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) is a vital Google Core Web Vital metric. Without explicit proportions, an image pushes downstream text down abruptly when it downloads. Setting aspect-ratio completely prevents layout shifts.

/* Zero CLS layout jump guaranteed */
.hero-media {
  width: 100%;
  aspect-ratio: 16 / 9;
}

The object-fit and object-position synergy

object-fit: cover scales images and videos to fill their container box while preserving natural proportions, trimming excess edges. object-position dictates the focal alignment anchor (e.g. keeping a face or logo centered during responsive cropping).

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%; /* Keeps the face in frame */
}

FAQ

What is the difference between object-fit: fill and cover?

fill violently distorts and squishes the media to match container dimensions. cover preserves the natural aspect ratio, smoothly clipping excess margins without distortion.

Is aspect-ratio widely supported?

Yes! All modern browsers (Chrome, Edge, Safari 15+, Firefox) provide complete cross-platform support with over 96% global coverage.

Does this work on embedded YouTube iframes?

Yes, iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; } is the modern industry best practice for embedded responsive players.

This topic in the HTML & CSS course

More CSS tools

CSS gradient generator Linear, radial and conic gradients: pick colors, angle and stops, then copy the code. Flexbox generator and playground Try flex properties on a container and its items: direction, alignment, gaps and ready-made CSS. CSS Grid generator Set columns and rows, gaps and alignment, then copy the ready-made grid code. CSS box-shadow generator Pick offset, blur, color and layers for a shadow, then copy the ready-made box-shadow code. Cubic-bezier generator Drag the control points of an easing curve and copy the ready-made CSS transition. SVG animation generator Pick a shape and an effect — get inline SVG and CSS keyframes ready to paste. CSS specificity calculator Type selectors to see their (a,b,c) weight, a color-coded breakdown and which rule wins. CSS box model visualizer See content, padding, border and margin as a DevTools-style diagram and copy the CSS. CSS transform generator Move, rotate, scale and skew an element, see its original position and copy the code. CSS clamp() calculator Enter min and max font size and viewport width — get a ready clamp() for fluid typography. Color contrast checker (WCAG) Check text and background contrast against WCAG AA and AAA, and fix a failing pair of colors. CSS clip-path generator Polygons, bevels, arrows and circles: drag control points on the live canvas and copy ready-made CSS. CSS glassmorphism generator Frosted glass effect: backdrop-filter blur, saturation, border highlight and clean CSS. CSS border-radius (Blob) generator Organic shapes and 8-value border-radius: tune horizontal and vertical corner radii. CSS Stacking Context & z-index Visualizer Why z-index: 9999 fails! Explore CSS Stacking Contexts in interactive 3D exploded layers with transform, opacity and isolation triggers. CSS Filters Studio & Generator Photo effects without design tools: blur, contrast, hue-rotate, sepia, and trending Instagram-style presets. OKLCH Color Picker & Palette Generator Perceptually uniform brightness & vibrant Display P3 colors: OKLCH picker, design system scales, and fallbacks. CSS Scroll-driven Animations Generator Scroll-linked animations without JavaScript: animation-timeline scroll() & view(), reading progress bar & reveal on scroll. CSS Container Queries (@container) Generator Beyond viewport media queries: components adapt directly to their parent container width. Live resizer & @container rules.
WhatsApp