UNPKG

3.89 kBCSSView Raw
1/*
2
3 ASPECT RATIOS
4
5*/
6
7/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc.
8 * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e
9 * Make sure there are no height and width attributes on the embedded media.
10 * Adapted from: https://github.com/suitcss/components-flex-embed
11 *
12 * Example:
13 *
14 * <div class="aspect-ratio aspect-ratio--16x9">
15 * <iframe class="aspect-ratio--object"></iframe>
16 * </div>
17 *
18 * */
19
20.aspect-ratio {
21 height: 0;
22 position: relative;
23}
24
25.aspect-ratio--16x9 { padding-bottom: 56.25%; }
26.aspect-ratio--9x16 { padding-bottom: 177.77%; }
27
28.aspect-ratio--4x3 { padding-bottom: 75%; }
29.aspect-ratio--3x4 { padding-bottom: 133.33%; }
30
31.aspect-ratio--6x4 { padding-bottom: 66.6%; }
32.aspect-ratio--4x6 { padding-bottom: 150%; }
33
34.aspect-ratio--8x5 { padding-bottom: 62.5%; }
35.aspect-ratio--5x8 { padding-bottom: 160%; }
36
37.aspect-ratio--7x5 { padding-bottom: 71.42%; }
38.aspect-ratio--5x7 { padding-bottom: 140%; }
39
40.aspect-ratio--1x1 { padding-bottom: 100%; }
41
42.aspect-ratio--object {
43 position: absolute;
44 top: 0;
45 right: 0;
46 bottom: 0;
47 left: 0;
48 width: 100%;
49 height: 100%;
50 z-index: 100;
51}
52
53@media (--breakpoint-not-small){
54 .aspect-ratio-ns {
55 height: 0;
56 position: relative;
57 }
58 .aspect-ratio--16x9-ns { padding-bottom: 56.25%; }
59 .aspect-ratio--9x16-ns { padding-bottom: 177.77%; }
60 .aspect-ratio--4x3-ns { padding-bottom: 75%; }
61 .aspect-ratio--3x4-ns { padding-bottom: 133.33%; }
62 .aspect-ratio--6x4-ns { padding-bottom: 66.6%; }
63 .aspect-ratio--4x6-ns { padding-bottom: 150%; }
64 .aspect-ratio--8x5-ns { padding-bottom: 62.5%; }
65 .aspect-ratio--5x8-ns { padding-bottom: 160%; }
66 .aspect-ratio--7x5-ns { padding-bottom: 71.42%; }
67 .aspect-ratio--5x7-ns { padding-bottom: 140%; }
68 .aspect-ratio--1x1-ns { padding-bottom: 100%; }
69 .aspect-ratio--object-ns {
70 position: absolute;
71 top: 0;
72 right: 0;
73 bottom: 0;
74 left: 0;
75 width: 100%;
76 height: 100%;
77 z-index: 100;
78 }
79}
80
81@media (--breakpoint-medium){
82 .aspect-ratio-m {
83 height: 0;
84 position: relative;
85 }
86 .aspect-ratio--16x9-m { padding-bottom: 56.25%; }
87 .aspect-ratio--9x16-m { padding-bottom: 177.77%; }
88 .aspect-ratio--4x3-m { padding-bottom: 75%; }
89 .aspect-ratio--3x4-m { padding-bottom: 133.33%; }
90 .aspect-ratio--6x4-m { padding-bottom: 66.6%; }
91 .aspect-ratio--4x6-m { padding-bottom: 150%; }
92 .aspect-ratio--8x5-m { padding-bottom: 62.5%; }
93 .aspect-ratio--5x8-m { padding-bottom: 160%; }
94 .aspect-ratio--7x5-m { padding-bottom: 71.42%; }
95 .aspect-ratio--5x7-m { padding-bottom: 140%; }
96 .aspect-ratio--1x1-m { padding-bottom: 100%; }
97 .aspect-ratio--object-m {
98 position: absolute;
99 top: 0;
100 right: 0;
101 bottom: 0;
102 left: 0;
103 width: 100%;
104 height: 100%;
105 z-index: 100;
106 }
107}
108
109@media (--breakpoint-large){
110 .aspect-ratio-l {
111 height: 0;
112 position: relative;
113 }
114 .aspect-ratio--16x9-l { padding-bottom: 56.25%; }
115 .aspect-ratio--9x16-l { padding-bottom: 177.77%; }
116 .aspect-ratio--4x3-l { padding-bottom: 75%; }
117 .aspect-ratio--3x4-l { padding-bottom: 133.33%; }
118 .aspect-ratio--6x4-l { padding-bottom: 66.6%; }
119 .aspect-ratio--4x6-l { padding-bottom: 150%; }
120 .aspect-ratio--8x5-l { padding-bottom: 62.5%; }
121 .aspect-ratio--5x8-l { padding-bottom: 160%; }
122 .aspect-ratio--7x5-l { padding-bottom: 71.42%; }
123 .aspect-ratio--5x7-l { padding-bottom: 140%; }
124 .aspect-ratio--1x1-l { padding-bottom: 100%; }
125 .aspect-ratio--object-l {
126 position: absolute;
127 top: 0;
128 right: 0;
129 bottom: 0;
130 left: 0;
131 width: 100%;
132 height: 100%;
133 z-index: 100;
134 }
135}