在網(wǎng)頁佈局中保持元素寬高比的方法有兩種：1. 使用padding-top 技巧；2. 使用aspect-ratio 屬性。 padding-top 方法通過百分比計(jì)算佔(zhàn)位實(shí)現(xiàn)比例控制，兼容性好但結(jié)構(gòu)複雜，適合塊級(jí)元素；aspect-ratio 方法簡(jiǎn)潔直觀，支持現(xiàn)代瀏覽器，可直接設(shè)置寬高比，適合響應(yīng)式設(shè)計(jì)與內(nèi)聯(lián)元素，若需兼容老舊瀏覽器可結(jié)合feature query 使用fallback 樣式。

在網(wǎng)頁佈局中保持元素的寬高比，尤其是在響應(yīng)式設(shè)計(jì)裡，是一個(gè)常見的需求。比如你想讓一個(gè)視頻容器始終保持16:9 的比例，或者一張圖片框不管屏幕多大都保持正方形。這時(shí)候有兩個(gè)常用方法：用padding-top折騰出一個(gè)“佔(zhàn)位”，或者直接使用現(xiàn)代瀏覽器支持的aspect-ratio屬性。

下面我們就來看看這兩種方法怎麼用、什麼時(shí)候用更合適。

用padding-top 做寬高比佔(zhàn)位

這個(gè)方法其實(shí)是個(gè)CSS 小技巧，利用的是padding-top百分比是基於父容器寬度來計(jì)算的特性。

舉個(gè)例子，如果你想做一個(gè)16:9 的盒子：

 .aspect-box {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 9 / 16 = 0.5625 */
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

這樣.aspect-box會(huì)根據(jù)寬度自動(dòng)算出高度，從而保持16:9 的比例。 .content放在裡面就可以填滿這個(gè)固定比例的空間。

這種方法的好處是兼容性好，老瀏覽器也能支持。但缺點(diǎn)也很明顯：結(jié)構(gòu)複雜了點(diǎn)，要嵌套一層，而且只適合塊級(jí)元素，不能直接作用在圖片或其他內(nèi)聯(lián)元素上。

使用aspect-ratio 直接設(shè)置寬高比

CSS 的aspect-ratio屬性出現(xiàn)後，事情就變得簡(jiǎn)單多了。你可以直接給一個(gè)元素設(shè)置寬高比，比如：

 .square {
  aspect-ratio: 1 / 1;
  width: 100px;
}

這樣不管內(nèi)容是什麼，這個(gè)元素都會(huì)保持正方形。你也可以配合width: 100%做響應(yīng)式：

 .video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

這個(gè)方法的最大優(yōu)勢(shì)就是簡(jiǎn)潔直觀，不需要嵌套結(jié)構(gòu)，也不需要絕對(duì)定位。但要注意的是，不是所有瀏覽器都完全支持它，雖然主流現(xiàn)代瀏覽器都已經(jīng)沒問題了。

如何選擇：padding-top 還是aspect-ratio？

• 需要兼容老舊瀏覽器（比如IE）？
  那還是得用padding-top 方法。
• 追求代碼簡(jiǎn)潔、結(jié)構(gòu)清晰？
  推薦用aspect-ratio 。
• 元素本身是圖片或視頻？
  可以先試試aspect-ratio ，不行再換回padding-top。
• 想做響應(yīng)式容器包裹iframe 或其他內(nèi)容？
  兩種都能用，但padding-top 更靈活一些。

如果你的項(xiàng)目對(duì)兼容性的要求不高， aspect-ratio是首選。如果還要考慮舊版瀏覽器，可以結(jié)合兩者，用feature query 判斷是否支持：

 @supports (aspect-ratio: 1/1) {
  .box {
    aspect-ratio: 16 / 9;
    width: 100%;
  }
}

/* fallback styles here if needed */

基本上就這些。兩種方法各有適用場(chǎng)景，不復(fù)雜但容易忽略細(xì)節(jié)，比如百分比的計(jì)算、絕對(duì)定位的位置控制、還有瀏覽器兼容問題。選對(duì)方法能讓你的佈局更輕鬆也更可靠。

以上是使用CSS填充攻擊或aptive-Ratio屬性維持縱橫比的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！