首頁  >  文章  >  web前端  >  用css怎麼實現實現寬高比

用css怎麼實現實現寬高比

青灯夜游
青灯夜游原創
2021-06-08 14:10:134871瀏覽

實作方法:1、利用padding屬性和「%」單位;2、利用padding和calc()屬性;3、利用padding屬性和CSS變數;4、利用padding屬性和偽元素;5、直接利用視窗單位「vw」;6、使用視窗單位配合CSS Grid佈局。

用css怎麼實現實現寬高比

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

長寬比故事

長寬比在影視製作中又稱之為寬高比,指的是一個影片的寬度除以它的高度所得到的比例,通常表示為x:yx×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-toppadding-bottom的百分比值,實現容器長寬比。在CSS中padding-toppadding-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()

這個方案採用的是paddingcalc()搭配在一起使用。其實原理和第一個方案是一樣的。只不過在第一個方案中,我們每次都需要對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-toppadding-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-columngrid-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;
}

(学习视频分享:css视频教程

以上是用css怎麼實現實現寬高比的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn