CSS3實現div等寬高比縮放

需求

在做響應式頁面的時候有這樣的需求，要求div的寬高等比例放大或縮小。
我們先放圖片：

要做一排方形的div，放不下時自動換行。

代碼

HTML：

<div class="container">
  <ul>
    <li>
      <div class="inner">1</div>
    </li>
    <li>
      <div class="inner">1</div>
    </li>
    <li>
      <div class="inner">1</div>
    </li>
    <li>
      <div class="inner">1</div>
    </li>
    <li>
      <div class="inner">1</div>
    </li>
  </ul>
</div>

CSS:

html,body {
  width: 100%;
  height: 100%;
}
.container {
  width: 80%;
  margin-left: 10%;
}
ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #aaa;
}
li {
  width: calc(92%/4);
  padding-bottom: calc(92%/4);
  background-color: #ccc;
  box-sizing: border-box;
  position: relative;
  margin: 1%;
}
.inner {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  text-align: center;
}

原理

主要是用到了width為父元素的百分之多少，我們在寫padding-top或padding-bottom時，如果用百分比，則是相對於自身寬度的百分比（即設置padding-top或padding-bottom和width的值一致即可）。
由於設置了padding值，沒有了內容的位置，這時候就用到了絕對定位。給li設置相對定位，里邊的內容區域inner設置絕對定位即可。

補充

如果這樣看起來有點亂的話，我們來個簡單的小demo：

如圖：

HTML：

<div class="outer">
  <div class="li">
    <div class="inner">1</div>
  </div>
</div>

CSS:

.container {
  width: 80%;
  margin-left: 10%;
}
.outer {
  margin: 50px auto;
  width: 100%;
  display: flex;
  justify-content: center;
  border: 1px solid #aaa;
}
.li {
  width: 25%;
  padding-bottom: 25%;
  background-color: #ccc;
  box-sizing: border-box;
  position: relative;
}
.inner {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  text-align: center;
}

代碼中的重點：

• width: 25%; padding-bottom: 25%; （width和padding的百分比相等即為寬高比1：1）
• padding會將內容擠出盒子，使用定位將內容定位到父元素中。