面試官：CSS如何實現固定寬高比？

對於這個問題，你可能尚未過相關需求，或者尚未在面試的時候被問到過，可是歪馬相信你終將有須要。css

這個問題提及來也是老生常談，歪馬今天再次提起也是但願有朝一日當你被問到的時候，可以答得漂亮。前端

若是有一天你被問到：「你能說一下如何實現一個固定寬高比的元素嗎？」ios

聽到這個的時候你必定不要盲目的說出答案。由於這麼問的話，題目並不明確。因此你能夠幫面試官補充題設或提問來確認要求。你能夠作以下回答：面試

若是元素的尺寸已知的話，沒什麼好說的，計算好寬高寫上去就好了。
若是元素尺寸未知，最簡單的方法是用 JavaScript 實現，若是用 CSS 的話能夠分爲如下幾種：
- 若是是可替換元素<img>或<video>，該怎麼實現?
- 若是是普通的元素，又應該怎麼實現？

今天歪馬就和你們一塊兒看看上面幾種狀況。瀏覽器

首先，元素尺寸已知，這個 pass 掉。不用說，說了我怕大家打我。markdown

咱們重點討論元素尺寸未知的狀況。app

因此本文主要分爲可替換元素和普通元素如何實現固定寬高比。ide

1、可替換元素實現固定寬高比

可替換元素(如<img>、<video>)和其餘元素不一樣，它們自己有像素寬度和高度的概念。因此若是想實現這一類元素固定寬高比，就比較簡單。oop

咱們能夠指定其寬度或者高度值，另外一邊自動計算就能夠了。spa

以下，咱們固定圖片元素的寬度，高度自適應：

<div class="img-wrapper">
  <img src="https://p3.ssl.qhimg.com/t01f7d210920c0c73bd.jpg" alt="">
</div>
複製代碼


.img-wrapper {
  width: 50vw;
  margin: 100px auto;
  padding: 10px;
  border: 5px solid lightsalmon;
  font-size: 0;
}
複製代碼img { width: 100%; height: auto; }

效果以下圖所示，能夠看出當可視區域不斷變大的過程當中，圖片會跟着變大，而且保留了原比例。

你可能沒注意到，咱們給img元素設定了height: auto;，這是爲了不開發者或者內容管理系統在 HTML 源碼中給圖片添加了height屬性，經過這個方式能夠覆蓋掉，避免出現 bug。

此外，對於video元素也相似，你們能夠試下，效果以下。

2、普通元素實現固定寬高比

雖然咱們上面實現了可替換元素的固定寬高比，可是這個比例主要是由於可替換元素自己有尺寸，並且這個比例還會受到原有尺寸比例的限制。顯然，這並不靈活，那咱們該如何針對普通元素實現固定寬高比呢。

首先咱們來看看最經典的padding-bottom/padding-top的 hack 方式。

2.1 `padding-bottom`實現普通元素固定寬高比

在以前的陪讀章節《精通 CSS》第 3 章可見格式化模型中，咱們提到垂直方向上的內外邊距使用百分比作單位時，是基於包含塊的寬度來計算的。

下面均以padding-bottom爲例

經過藉助padding-bottom咱們就能夠實現一個寬高比例固定的元素，以div爲例。

HTML:

<div class="wrapper">
  <div class="intrinsic-aspect-ratio-container"></div>
</div>
複製代碼

CSS:

.wrapper {
  width: 40vw;
}
.intrinsic-aspect-ratio-container {
  width: 100%;
  height: 0;
  padding: 0;
  padding-bottom: 75%;
  margin: 50px;
  background-color: lightsalmon;
}
複製代碼

效果以下：

如上代碼，咱們將div元素的高度設爲了0，經過padding-bottom來撐開盒子的高度，實現了4/3的固定寬高比。

這樣是實現了固定寬高比，但其只是一個徒有其表的空盒子，裏面沒有內容。若是想在裏面放入內容，咱們還須要將div`內部的內容使用絕對定位來充滿固定尺寸的容器元素。

以下：

.intrinsic-aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding: 0;
  padding-bottom: 75%;
  margin: 50px;
  background-color: lightsalmon;
}
.content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
複製代碼

經過這種方式咱們就能夠實現一個能夠填充內容的固定尺寸的容器了。

此外，尺寸比例，咱們也能夠經過calc()來計算，這樣比較靈活。咱們能夠快速的寫出任意比例，如padding-bottom: calc(33 / 17 * 100%);。

不知道，你有沒有發現，上面的這種方式只能高度隨着寬度動，並不能實現寬度隨着高度動。

那有沒有辦法實現寬度隨着高度動呢？答案是沒有，至少如今沒有。但未來就會有了。接下來咱們一塊兒看看更簡單便捷的另外一種方式。

2.2 `aspect-ratio`屬性指定元素寬高比

因爲固定寬高比的需求存在已久，經過padding-bottom來 hack 的方式也很不直觀，而且須要元素的嵌套。

W3C 的 CSS 工做組爲了不這一問題，已經在致力於實現這樣一個屬性aspect-ratio。該方案已經提出，可是尚未瀏覽器實現，如今還處於設計節點，暫時尚未已發佈的工做組草案，只有編輯草案。

可是這並不妨礙咱們來提早了解一下這個新技術。

下面讓咱們一塊兒來看看是如何的便利吧。

aspect-ratio的語法格式以下：aspect-ratio: <width-ratio>/<height-ratio>。

以下，咱們能夠將width或height設爲auto，而後指定aspect-ratio。另外一個值就會按照比例自動變化。


/* 高度隨動 */
.box1 {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}
複製代碼/* 寬度隨動 */ .box2 { height: 100%; width: auto; aspect-ratio: 16/9; }

這一技術能夠很靈活的實現元素的固定寬高比，而且指定寬高之一都可。只是如今尚未瀏覽器實現，讓咱們共同期待吧。

3、總結

本文總結了如何實現元素的固定寬高比。若是你再在面試的過程當中被問到這個問題。你就能夠像這樣回答了。

若是元素的尺寸已知的話，沒什麼好說的，計算好寬高寫上去就好了。
若是元素尺寸未知，最簡單的方法是用 JavaScript 實現，若是用 CSS 的話又要分爲如下幾種：
- 若是是可替換元素<img>或<video>，能夠將width/height其一設定尺寸，另外一個設爲auto，則可替換元素會根據其固有尺寸進行變化。
- 若是是普通的元素，咱們能夠經過padding-top/padding-bottom的方式來模擬固定寬高比，不過這種方式不靈活，只可以高度隨着寬度變。CSS 工做組如今正在引入一種新的方案aspect-ratio，能夠很方便地指定寬高比，不過暫時尚未瀏覽器實現。相信不久以後就會有瀏覽器逐漸實現了。

若是最後你的答案是這樣的，那麼你不只完善了老師的題設，給出了各類狀況的解決方案，最後還點出了標準中正在制定的新方案。這樣回答不只展現了你對於問題考慮的嚴謹，還能夠看出你時刻關注着標準的制定，這都是大大的加分項喲。這樣，我只能說，此次面試你穩了。

參考連接

若是你喜歡，歡迎掃碼關注個人公衆號，若是可以轉發分享那就更好了。我會按期陪讀，並分享一些其餘的前端知識，期待與你共同進步。