如何使用純CSS實現固定寬高比div？

是小小白啊發表於2018-05-20
CSS

在很多場景下，我們都需要一個固定長寬比的div作為容器。直接使用js動態設定固然可行，但在頁面大小變化時就不得不通過觸發onresize事件來動態設定，十分不便。此文旨在於探討使用純CSS實現固定長寬比的容器，取代js動態設定。

方法一：height: auto

若div中只有img標籤,且需要div按照圖片長寬比自動縮放，則只需將img和div的height均設定為auto即可。程式碼如下:

<!--HTML-->
<!DOCTYPE html>
<html>
<head>
  <title>div中只有img</title>
  <style type="text/css">
    .box{
      width: 50%;
      height: auto;
    }
    img{
      width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <div class="box">
    <img src="http://p8gjnrgtp.bkt.clouddn.com/4.jpg">
  </div>
</body>
</html>
<!--HTML-->
複製程式碼

Chrome執行截圖如下：

如何使用純CSS實現固定寬高比div？
如何使用純CSS實現固定寬高比div？

方法二：height + padding-bottom

讓我們回顧一下CSS中padding百分比值的計算方法：padding設定為百分比時，是以元素的寬度乘以百分比從而得到padding值的。這剛好可以為我們所用，在div的width為固定的情況下，設定height為0，使內容自然溢位，再通過設定padding-bottom使元素有一定高度。
廢話不多說，上程式碼：

<!--HTML-->
<!DOCTYPE html>
<html>
<head>
  <title>height + padding-bottom</title>
  <style type="text/css">
    .box{
      width: 50%;
      height: 0;
      padding-bottom: 30%;
      /*寬高比為5:3*/
      background: url(http://p8gjnrgtp.bkt.clouddn.com/4.jpg);
      background-size: cover;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>
<!--HTML-->
複製程式碼

Chrome執行截圖如下：

如何使用純CSS實現固定寬高比div？
Tips&bugs：
1.祖先元素（即最早定義的寬高比固定的元素）height為0，後代元素無法再通過直接設定height百分比來動態計算高度。
2.解決辦法是：後代元素也通過相同的辦法來定義寬高，即也使用height + padding-bottom的方式來將高度撐起來。

相關文章