Aspect Ratio
Container Width
100
Calculated Values
Ratio: 16:9
Padding hack: 56.25%
Decimal: 1.7778
Preview
16:9
Common Use Cases
16:9Videos, YouTube embeds
4:3Standard photos, older TVs
1:1Profile images, icons
9:16Stories, mobile video
Generated CSS
/* Modern approach (aspect-ratio property) */
.aspect-container {
width: 100%;
aspect-ratio: 16 / 9;
}
/* Fallback for older browsers (padding hack) */
.aspect-container-legacy {
width: 100%;
position: relative;
padding-bottom: 56.25%;
}
.aspect-container-legacy > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}