CSS怎么實現固定寬高比

這篇文章給大家分享的是有關CSS怎么實現固定寬高比的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

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

可替換元素(如 <img> 、 <video> )和其他元素不同，它們本身有像素寬度和高度的概念。所以如果想實現這一類元素固定寬高比，就比較簡單。

我們可以 指定其寬度或者高度值，另一邊自動計算就可以了 。

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

<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 元素也類似，大家可以試下，效果如下。

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

雖然我們上面實現了可替換元素的固定寬高比，但是這個比例主要是因為可替換元素本身有尺寸，而且這個比例還會受到原有尺寸比例的限制。顯然，這并不靈活，那我們該如何針對普通元素實現固定寬高比呢。

首先我們來看看最經典的 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: <widtu-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;
}

這一技術可以很靈活的實現元素的固定寬高比，并且指定寬高之一均可。只是現在還沒有瀏覽器實現，讓我們共同期待吧。

感謝各位的閱讀！關于“CSS怎么實現固定寬高比”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！