AspectFlow v2.5 // PRO

Ratio Engine Active:
16:9 (1.7778 : 1)
LANDSCAPE
Exact Padding: 56.25%
viewBox: 0 0 1920 1080
GCD: 120
01 // Source Dimensions
px
px
Presets & Industry Standards: Click to apply base dimensions
Target Device/Format:
02 // Live Proportion Preview 16:9
viewBox (0, 0)
(1920, 1080)
16 : 9
1920 × 1080 px
pb: 56.25%
W: 1920
H: 1080
Stage Scale: 85%

CSS INTRINSIC RATIO (padding-bottom %)

Sensibly Rounded: 56.25%
High-Precision Exact: 56.25000000%
Rounding Drift: 0.0000% (Exact) 
/* Classic Intrinsic Aspect Ratio Container */
.aspect-ratio-box {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* (1080 / 1920) * 100% = 16:9 */
  height: 0;
  overflow: hidden;
}

.aspect-ratio-box > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Works across all legacy and modern browsers. The padding-bottom percentage is calculated relative to the parent element's width, reserving vertical layout space before media assets load to prevent Cumulative Layout Shift (CLS).

MODERN CSS (aspect-ratio) 

/* Modern CSS Specification */
.media-container {
  width: 100%;
  aspect-ratio: 16 / 9; /* or 1920 / 1080 */
  object-fit: cover;
}

/* Progressive Enhancement with fallback */
@supports not (aspect-ratio: 16 / 9) {
  .media-container::before {
    content: "";
    float: left;
    padding-top: 56.25%;
  }
  .media-container::after {
    content: "";
    display: block;
    clear: both;
  }
}
Tailwind CSS utility:
aspect-video

SVG viewBox & SKELETON

Attribute String: viewBox="0 0 1920 1080" (reduced: "0 0 16 9") 
<svg 
  xmlns="http://www.w3.org/2000/svg" 
  viewBox="0 0 1920 1080" 
  width="100%" 
  height="100%"
  preserveAspectRatio="xMidYMid meet"
>
  <!-- 16:9 Coordinate Space Content -->
  <rect width="1920" height="1080" fill="#0b111e"/>
</svg>

The viewBox establishes an internal virtual coordinate system, allowing infinite crisp vector scaling without distortion.

Embeddable Responsive Iframe / Video 
<div style="position: relative; width: 100%; padding-bottom: 56.25%; height: 0;">
  <iframe 
    src="https://www.youtube.com/embed/VIDEO_ID" 
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;" 
    allowfullscreen
  ></iframe>
</div>
Recent Calculations in this Session:
No recent calculations yet. Changes to dimensions will appear here.
More demos