如何使用css實(shí)現(xiàn)實(shí)現(xiàn)寬高比

這篇文章給大家分享的是有關(guān)如何使用css實(shí)現(xiàn)實(shí)現(xiàn)寬高比的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

香格里拉ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！

實(shí)現(xiàn)方法：1、利用padding屬性和“%”單位；2、利用padding和calc()屬性；3、利用padding屬性和CSS變量；4、利用padding屬性和偽元素；5、直接利用視窗單位“vw”；6、使用視窗單位配合CSS Grid布局。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

長寬比故事

長寬比在影視制作中又被稱之為寬高比，指的是一個(gè)視頻的寬度除以它的高度所得到的比例，通常表示為x:y或x×y，其中的冒號(hào)和叉號(hào)表示中文的“比”之意。目前，在電影工業(yè)中最常被使用的是anamorphic比例（即2.39:1）。傳統(tǒng)的4:3仍然被使用于現(xiàn)今的許多電視畫面上，而它成功的后繼規(guī)格16:9則被用于高清晰度電視或數(shù)字電視上。常見的比例：

有關(guān)于長寬比更多的介紹可以閱讀Wiki上的Aspect ration一文。

HTML結(jié)構(gòu)

使用CSS實(shí)現(xiàn)容器長寬比，常見的HTML模板結(jié)構(gòu)有兩種：

<div class="aspectration" data-ratio="16:9">
    <div class="content"></div>
</div>

另外一種結(jié)構(gòu)是：

<div class="aspectration" data-ratio="16:9">
</div>

具體使用的時(shí)候，根據(jù)自己使用場(chǎng)景采用不同的結(jié)構(gòu)。

CSS實(shí)現(xiàn)長寬比例方案

前面也提到過了，使用CSS實(shí)現(xiàn)長寬比方案有多種，下面簡(jiǎn)單的羅列一下這些方案。不過每種方案都不會(huì)詳細(xì)介紹，因?yàn)榇a非常簡(jiǎn)單，看一眼代碼就能明白其中原理。

垂直方向的padding

這是最早提出的一種實(shí)現(xiàn)方案，主要借助的原理是利用padding-top或者padding-bottom的百分比值，實(shí)現(xiàn)容器長寬比。在CSS中padding-top或padding-bottom的百分比值是根據(jù)容器的width來計(jì)算的。如此一來就很好的實(shí)現(xiàn)了容器的長寬比。采用這種方法，需要把容器的height設(shè)置為0。而容器內(nèi)容的所有元素都需要采用position:absolute，不然子元素內(nèi)容都將被padding擠出容器（造成內(nèi)容溢出）。

比如我們?nèi)萜鞯拈L寬比是16:9，那么根據(jù)計(jì)算：100% * 9 / 16可以得到56.25%。如果你希望的是4:3，那么對(duì)應(yīng)的就是100% * 3 / 4。

具體的CSS代碼如下：

.aspectration {
    position: relative; /*因?yàn)槿萜魉凶釉匦枰^對(duì)定位*/
    height: 0; /*容器高度是由padding來控制，盒模型原理告訴你一切*/
    width: 100%; 
}

.aspectration[data-ratio="16:9"] {
    padding-top: 56.25%;
}

.aspectration[data-ratio="4:3"]{
    padding-top: 75%;
}

通過通配符*選擇器，讓其子元素的寬高和容器.aspectration一樣大?。?/p>

.aspectration > * {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

padding & calc()

這個(gè)方案采用的是padding和calc()配合在一起使用。其實(shí)原理和第一個(gè)方案是一樣的。只不過在第一個(gè)方案中，我們每次都需要對(duì)padding的值計(jì)算，如果使用calc()可以通過瀏覽器直接計(jì)算出padding的百分比值。

.aspectration[data-ratio="16:9"] {
    padding-top: calc(100% * 9 / 16);
}

padding & CSS變量

對(duì)于變量而言，以前是其他計(jì)算器語言和CSS處理器的特性，不過值得特性的是，現(xiàn)在也是CSS的特性。接下來的這個(gè)方案也是基于padding原理，只不過是借助于CSS變量特性，讓前面的方案變得更為靈活一些。使用CSS的變量時(shí)，可以把HTML中data-ratio去掉了。換成style="--aspect-ratio:16/9"，也可以是style="--aspect-ratio:1.4;"。同時(shí)也可以借助于第二個(gè)方案中的calc()。因?yàn)镃SS的變量和calc()函數(shù)的結(jié)合是一種完美的結(jié)合。

.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。了解過這個(gè)單位的同學(xué)都知道，瀏覽器100vw表示的就是瀏覽器的視窗寬度(Viewport)。打個(gè)比方說，如果你的瀏覽器是1334px，那么對(duì)就的100vw = 1334px。這個(gè)時(shí)候也就是說1vw = 13.34px。這里的100vw也對(duì)應(yīng)前面方案中的100%。這樣我們就可以把前面的%單位換成vw的單位。打個(gè)比方說，16:9對(duì)應(yīng)的就是100vw * 9 / 16 = 56.25vw。這個(gè)值可以用在padding-top或者padding-bottom中。但這里演示的不再是padding了，而是把這個(gè)值給height。

.aspectration[data-ratio="16:9"] {
    width: 100vw;
    height: 56.25vw;
}

上面的示例中width的值是30vw,那么對(duì)應(yīng)的height值就是30vw * 9 / 16 = 16.875vw。

視窗單位 & CSS Grid

這是一個(gè)很有創(chuàng)意的解決方案，使用的都是CSS新特性：視窗單位和CSS Grid Layout。簡(jiǎn)單說一下其中的實(shí)現(xiàn)原理：將容器.aspectration通過display:grid聲明為一個(gè)網(wǎng)格容器，并且利用repeat()將容器劃分為橫向比例，比如16，那么每一格的寬度對(duì)應(yīng)的就是100vw * 9 / 16 = 6.25vw。同樣使用grid-auto-rows，將其設(shè)置的值和橫向的值一樣。在子元素上通過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;
}

感謝各位的閱讀！關(guān)于“如何使用css實(shí)現(xiàn)實(shí)現(xiàn)寬高比”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

標(biāo)題名稱：如何使用css實(shí)現(xiàn)實(shí)現(xiàn)寬高比
網(wǎng)頁地址：http://www.jbt999.com/article42/iipiec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、微信小程序、品牌網(wǎng)站制作、做網(wǎng)站、響應(yīng)式網(wǎng)站、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)