CSS實現寬度自適應100%，寬高16:9的比例的矩形

現在我們來講講做自適應16:9的矩形要怎么做

第一步先計算高度，假設寬100%，那么高為h=9/16=56.25%

第二步利用之前所說設置padding-bottom方法實現矩形

代碼

HTML

<div class="box">
  <div class="scale">
    <p>這是一個16：9的矩形</p>
  </div>
</div>

css

.box {
  width: 80%;
}

.scale {
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  position: relative;
}

.item {
  width: 100%;
  height: 100%;
  background-color: aquamarine;
  position: absolute;
}