Ratio
Utility classes for quickly configuring element aspect ratios. Ideal for video containers, images, and iframes requiring proportional scaling.
Basic Usage
Custom Ratios
Override the CSS variable --ms-aspect-ratio for custom aspect ratios:
Quick Reference
| Class | Styles |
|---|---|
.ratio | position: relative; |
.ratio-1x1 | --ms-aspect-ratio: 100%; |
.ratio-4x3 | --ms-aspect-ratio: 75%; |
.ratio-16x9 | --ms-aspect-ratio: 56.25%; |
.ratio-21x9 | --ms-aspect-ratio: 42.8571428571%; |
All classes support responsive prefixes like
sm:,md:,lg:,xl:etc.