Media Wrapper
⚠️ This class is deprecated. Replace with aspect-ratio.
Set the aspect ratio of an element by adding the .media-wrapper
class to its parent (e.g., use this class to make an iframe responsive - example):
CSS Class | Description |
---|---|
media-wrapper |
set 16:9 ratio |
media-wrapper--4:3 |
set 4:3 ratio |
media-wrapper--1:1 |
set 1:1 ratio (square) |
To create additional .media-wrapper--x:y
classes, define your custom $media-wrapper-aspect-ratios
SASS map and import it before the 'base' and 'custom-style' files of the framework.
$media-wrapper-aspect-ratios: (
(4 3),
(1 1),
(21 9) // custom ratio
);
@import 'base';
@import 'custom-style';
Make sure to include the ratios 4/3 and 1/1 when defining your custom $media-wrapper-aspect-ratios
map (as shown in the snippet above).
Alternatively, you can create an _util.scss file inside the /custom-style folder, and add your custom ratios. Here's an example:
.media-wrapper--4\:5 {
padding-bottom: 125%; // calc(5/4*100)
}