CSS實現長寬比的幾種方案
長寬比故事
長寬比在影視製作中又被稱之為寬高比,指的是一個視訊的寬度除以它的高度所得到的比例,通常表示為x:y
或x×y
,其中的冒號和叉號表示中文的“比”之意。目前,在電影工業中最常被使用的是anamorphic比例(即2.39:1
)。傳統的4:3
仍然被使用於現今的許多電視畫面上,而它成功的後繼規格16:9
則被用於高清晰度電視或數字電視上。常見的比例:
有關於長寬比更多的介紹可以閱讀Wiki上的Aspect ration一文。
HTML結構
使用CSS實現容器長寬比,常見的HTML模板結構有兩種:
<div class="aspectration" data-ratio="16:9">
<div class="content"></div>
</div>
另外一種結構是:
<div class="aspectration" data-ratio="16:9">
</div>
具體使用的時候,根據自己使用場景採用不同的結構。
CSS實現長寬比例方案
前面也提到過了,使用CSS實現長寬比方案有多種,下面簡單的羅列一下這些方案。不過每種方案都不會詳細介紹,因為程式碼非常簡單,看一眼程式碼就能明白其中原理。
垂直方向的padding
這是最早提出的一種實現方案,主要藉助的原理是利用padding-top
或者padding-bottom
的百分比值,實現容器長寬比。在CSS中padding-top
或padding-bottom
的百分比值是根據容器的width
height
設定為0
。而容器內容的所有元素都需要採用position:absolute
,不然子元素內容都將被padding
擠出容器(造成內容溢位)。
比如我們容器的長寬比是16:9
,那麼根據計算:100% * 9 / 16
可以得到56.25%
。如果你希望的是4:3
,那麼對應的就是100% * 3 / 4
。
具體的CSS程式碼如下:
.aspectration {
position: relative; /*因為容器所有子元素需要絕對定位*/
height: 0; /*容器高度是由padding來控制,盒模型原理告訴你一切*/
width: 100%;
}
.aspectration[data-ratio="16:9"] {
padding-top: 56.25%;
}
.aspectration[data-ratio="4:3"]{
padding-top: 75%;
}
通過萬用字元*
選擇器,讓其子元素的寬高和容器.aspectration
一樣大小:
.aspectration > * {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
padding & calc()
這個方案採用的是padding
和calc()
配合在一起使用。其實原理和第一個方案是一樣的。只不過在第一個方案中,我們每次都需要對padding
的值計算,如果使用calc()
可以通過瀏覽器直接計算出padding
的百分比值。
.aspectration[data-ratio="16:9"] {
padding-top: calc(100% * 9 / 16);
}
padding & CSS變數
對於變數而言,以前是其他計算器語言和CSS處理器的特性,不過值得特性的是,現在也是CSS的特性。接下來的這個方案也是基於padding
原理,只不過是藉助於CSS變數特性,讓前面的方案變得更為靈活一些。使用CSS的變數時,可以把HTML中data-ratio
去掉了。換成style="--aspect-ratio:16/9"
,也可以是style="--aspect-ratio:1.4;"
。同時也可以藉助於第二個方案中的calc()
。因為CSS的變數和calc()
函式的結合是一種完美的結合。
.aspectration[style*="--aspect-ratio"] {
padding-top: calc(100% / (var(--aspect-ratio)));
}
padding & 偽元素
前面的方案都是在.aspectration
元素上使用padding
值。但在CSS中,還可以使用CSS的偽元素::before
或::after
來撐開容器。
.aspectration {
position: relative;
}
.aspectration:after {
content: "";
display: block;
width: 1px;
margin-left: -1px;
background-color: orange;
}
.aspectration[data-ratio="16:9"]:after {
padding-top: 56.25%;
}
.content {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
視窗單位
CSS新特性中提供了一種新的單位vw
。瞭解過這個單位的同學都知道,瀏覽器100vw
表示的就是瀏覽器的視窗寬度(Viewport)。打個比方說,如果你的瀏覽器是1334px
,那麼對就的100vw = 1334px
。這個時候也就是說1vw = 13.34px
。這裡的100vw
也對應前面方案中的100%
。這樣我們就可以把前面的%
單位換成vw
的單位。打個比方說,16:9
對應的就是100vw * 9 / 16 = 56.25vw
。這個值可以用在padding-top
或者padding-bottom
中。但這裡演示的不再是padding
了,而是把這個值給height
。
.aspectration[data-ratio="16:9"] {
width: 100vw;
height: 56.25vw;
}
上面的示例中width
的值是30vw
,那麼對應的height
值就是30vw * 9 / 16 = 16.875vw
。
視窗單位 & CSS Grid
這是一個很有創意的解決方案,使用的都是CSS新特性:視窗單位和CSS Grid Layout。簡單說一下其中的實現原理:將容器.aspectration
通過display:grid
宣告為一個網格容器,並且利用repeat()
將容器劃分為橫向比例,比如16
,那麼每一格的寬度對應的就是100vw * 9 / 16 = 6.25vw
。同樣使用grid-auto-rows
,將其設定的值和橫向的值一樣。在子元素上通過grid-column
和grid-row
按比例合併單元格。
.aspectration {
display: grid;
grid-template-columns: repeat(16, 6.25vw);
grid-auto-rows: 6.25vw;
}
.aspectration[data-ratio="16:9"] .content {
grid-column: span 16;
grid-row: span 9;
}
未來原生方案 aspect-ratio
在WICG的討論上,有人提出來了原生的長寬比屬性aspect-ratio
。例如,給定一個容器元素它的width
和height
都設定為auto
,並且aspect-ratio
的值為2/1
,max-height:200px
。一個容器寬度為500px
時,元素首先會設定width:500px
,然後根據aspect-ratio
比例將height
設定為250px
。這個時候其實違反了max-height
的約束。相反,容器大小會變成height: 200px
和width:400px
。另外,如果元素的max-width
是450px
時,長寬比將會完全被忽視,因為無法滿足。
如果把width
設定為一個百分比,高度不設定一個固定值:
.aspectration[data-ratio="16:9"] {
width: 100%;
height: aspect-ratio(16/9);
}
現在討論討論趨勢是把aspect-ratio
屬性值變成屬性,比如:
.aspectration[data-ratio="16:9"] {
width: 100%;
aspect-ratio: calc(16/9);
}
到目前為止,還沒有任何瀏覽器支援該屬性,但我們可以藉助PostCSS Aspect Ratio外掛來實現上述的功能:
/* Input. */
.aspect-box {
position: relative;
aspect-ratio: '16:9';
}
/* Output. */
.aspect-box {
position: relative;
box-sizing: border-box;
}
.aspect-box > * /* This targets .aspect-box__content */ {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-sizing: border-box;
}
.aspect-box:before /* This pseudo element uses the padding trick to set the height. */ {
position: relative;
display: block;
content: "";
padding-top: 56.25%;
box-sizing: border-box;
}
用心寫程式碼,不辜負程式設計師之名。