長寬比故事
長寬比在影視制作中又被稱之為寬高比，指的是一個視頻的寬度除以它的高度所得到的比例，通常表示為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; }https://www.w3cplus.com/css/aspect-ratio.html