Ratio

:before padding-top

針對部分組件需要設定比例使用,作用對象為該目標的虛擬類別 :before 上,因此使用時要注意是否符合,使用的組件包含 Carousel, Embed, Skeleton等。使用類別名稱為 .u-ratio:

使用方式為 u-ratio:{寬}by{高},例如 16:10 為 u-ratio:16by10

類別 百分比
1:1 u-ratio:1by1 100%
2:1 u-ratio:2by1 50%
2:3 u-ratio:2by3 150%
3:1 u-ratio:3by1 33%
3:2 u-ratio:3by2 66%
3:4 u-ratio:3by4 133%
4:3 u-ratio:4by3 75%
4:5 u-ratio:4by5 125%
5:2 u-ratio:5by2 40%
5:3 u-ratio:5by3 60%
5:4 u-ratio:5by4 80%
16:10 u-ratio:16by10 62%
21:9 u-ratio:21by9 42%
36:10 u-ratio:36by10 27%
.u-ratio:1by1
100%

.u-ratio:2by1
50%

.u-ratio:2by3
150%

.u-ratio:3by1
33%

.u-ratio:3by2
66%

.u-ratio:3by4
133%

.u-ratio:4by3
75%

.u-ratio:4by5
125%

.u-ratio:5by2
40%

.u-ratio:5by3
60%

.u-ratio:5by4
80%

.u-ratio:16by10
62%

.u-ratio:21by9
42%

.u-ratio:36by10
27%
<div class="embed u-ratio:16by10"></div>