Aspect Ratio
Classes for fluid media that is embedded from third party sites like YouTube and Vimeo.
| Class | Properties |
|---|---|
| .aspect-ratio | height: 0; position: relative; |
| .aspect-ratio-16x10 | padding-bottom: 62.5%; |
| .aspect-ratio-10x16 | padding-bottom: 160%; |
| .aspect-ratio-16x9 | padding-bottom: 56.25%; |
| .aspect-ratio-9x16 | padding-bottom: 177.77%; |
| .aspect-ratio-21x9 | padding-bottom: 42.86%; |
| .aspect-ratio-4x3 | padding-bottom: 75%; |
| .aspect-ratio-3x4 | padding-bottom: 133.33%; |
| .aspect-ratio-6x4 | padding-bottom: 66.6%; |
| .aspect-ratio-4x6 | padding-bottom: 150%; |
| .aspect-ratio-8x5 | padding-bottom: 62.5%; |
| .aspect-ratio-5x8 | padding-bottom: 160%; |
| .aspect-ratio-7x5 | padding-bottom: 71.42%; |
| .aspect-ratio-5x7 | padding-bottom: 140%; |
| .aspect-ratio-1x1 | padding-bottom: 100%; |
Usage
Wrap the outer element in .aspect-ratio and then extend it with the desired ratio i.e. Make sure there are no height and width attributes on the embedded media. Adapted from: https://github.com/suitcss/components-flex-embed
Variants
By default, only responsive variants are generated for this utility. You can control which variants are generated by modifying the $utility-configuration in _settings.scss.