元素固定寬高比這麼寫太香了 - Chrome 支持 aspect-ratio 了

本文首發於公衆號：歪馬行空，若是以爲還不錯，歡迎關注！css

前言

去年差很少這個時候，發了一篇關於CSS 固定寬高比實現的文章，總結了如何從面試者的角度回答固定寬高比實現的問題。若是你對於歷史的 hack 方式不太熟悉，建議先瀏覽一下原文章。ios

原文章的最後提到了 aspect-ratio 這種方式。不過當時尚未瀏覽器實現，如今標準以及實現都有了一些新的進展，這裏再次跟你們同步下。web

本文會介紹如今的瀏覽器實現與標準的進展狀況、並講解下具體用法。面試

此處，感謝掘友「小蟋蟀 00」的評論提醒，讓我有動力再更新下 😂。算法

瀏覽器實現及標準現狀

2021 年 1 月 19 號，Chrome 發佈了 Chrome 88，這一版本的更新中就包含了 aspect-ratio的實現。詳情能夠參考 Chrome 88 更新內容。chrome

Edge 如今使用的是 Chrome 內核，因此也支持 aspect-ratio。瀏覽器

除此以外，Safari 的技術預覽版（下載地址）已經支持 aspect-ratio了，參考Safari 技術預覽版 118 版本的發版日誌。markdown

Safairi 對 macOS 版本有要求，本着謹慎升級的態度，我沒有在該瀏覽器進行驗證。app

Firefox 從 81 版本以後也開始逐步支持 aspect-ratio 了。不過須要開啓對應的配置才行。地址欄輸入about:config，而後搜索 layout.css.aspect-ratio.enabled，將其設爲 true 便可。oop

目前來看，瀏覽器對於 aspect-ratio 的實現程度仍是很向好的。相關的規範也在去年十月更新了一版工做組草案。

因此是時候爬起來再學一學了，但願你們都還能學得動 😂。下面咱們從規範着手來看看具體的用法吧。

aspect-ratio 的具體用法

以前的文章也有提到，相似圖片和視頻等元素自己就具備一個內在寬高比，與素材的內容自己相關。CSS 的佈局算法會在元素尺寸變化的時候嘗試維持這一尺寸。

而對於非替換元素，則沒法實現相似的效果。aspect-ratio就是爲了解決這一場景而提出的，能夠給非替換元素指按期望的寬高比，CSS 在進行佈局計算的時候，會按照給定的值進行計算。

此外，該屬性還能夠用來修改可替換元素的固有寬高比。

aspect-ratio 可用於除行內盒子和table表格以外的元素，默認值爲 auto，不支持繼承，不支持百分比值xx%。

aspect-ratio 支持下面三類值：

auto：默認值，和之前的行爲同樣；這時候尺寸計算只考慮content-box內容盒子。
<ratio>：經過 width / height 的格式指定寬高比，能夠指定小數，不能使用百分比值；這時尺寸計算與box-sizing指定的值有關。
auto && <ratio>：若是同時指定了 auto 和 <ratio>值，若是應用的元素是可替換元素，則使用auto，若是不是則使用指定的<ratio>。這種狀況下，尺寸計算時按照content-box內容盒子計算。

給一個元素指定寬高比值並不意味着會把這個元素變成可替換元素，這個應該很好理解。之因此會這麼說，是想說對於一些僅對可替換元素生效的佈局規則，並不會由於指定寬高比而對非替換元素生效。如對於非替換元素，justify-self: normal 至關於 stretch，而不是start。

若是元素的寬高都不是auto時，則aspect-ratio 無效，也就是說寬高必須有一個值爲 auto。

以上是aspect-ratio的基本用法講解，下面咱們看幾個例子。

爲了便於展現，除盒子的通用 css 樣式以下所示外，其餘代碼如圖中文字所示，不單獨貼代碼了。

background-color: salmon;
margin: 10px auto;
display: block;
text-align: center;
line-height: 2;
white-space: pre-line;
複製代碼

1. 高度固定，寬度按比例

2. 寬度固定，高度按比例

3. 寬度固定，高度按比例，值爲小數，效果同上

4. 當存在邊框或者內邊距時，默認狀況是內容區域是按比例的

能夠看出下圖的內容區域，即紅色區域的比例爲 2/1

固然，咱們能夠經過 box-sizing 來改變這一行爲。能夠看出整個區域的比例是 2/1

5. 修改可替換元素的寬高比

經過apect-ratio能夠修改可替換元素的寬高比，此外若是對於元素同時設置 auto 和 <ratio>，則可替換元素會應用 auto，而非可替換元素則使用指定的比例。以下圖所示，上半部分圖片的尺寸改爲了正方形，下半部分會應用 auto：

6. 默認會基於內容自動計算最小尺寸

爲了不意料以外的溢出狀況，若是沒有顯式地指定 overflow 的值，則當內容溢出時，元素會打破所設置的寬高比，顯式地設置 overflow 的值便可，如 overflow: auto; / overflow: hidden;。

以下圖中兩個塊所示，上圖是默認包含了溢出內容，下圖指定了 overflow: auto;，則會按照預期行爲展現。

也能夠經過指定min-width/min-height的方式來避免這個問題，這裏我就不貼代碼和圖了，你們能夠本身試試。

細心的你可能從這個狀況會發現aspect-ratio的優先級比min-width/min-height高，即便指定了 min-width/min-height，佈局計算時也會盡量知足指定的寬高比。

兼容性寫法

雖然瀏覽器已經逐步支持了，可是支持度尚欠缺，若是想嘗試使用的話，能夠嘗試下面的兼容性寫法：

.box {
  width: 4rem;
  aspect-ratio: 1 / 1;
}

@supports not (aspect-ratio: 1 / 1) {
  .box {
    height: 4rem;
    width: 4rem;
  }
}
複製代碼

總結

以上就是全部的內容，但願對你有幫助。

本文首發於公衆號：歪馬行空，若是以爲還不錯，歡迎關注！