CSS实现宽度自适应100%，宽高16:9的比例的矩形

现在我们来讲讲做自适应16:9的矩形要怎么做

 新办法

使用 css属性（ aspect-ratio ）

语法

element {
  aspect-ratio: auto; /* 默认值，不设置比例 */
  aspect-ratio: 1/1; /* 正方形 */
  aspect-ratio: 16/9; /* 宽屏视频比例 */
  aspect-ratio: 9/16; /* 移动端竖屏视频比例 */
}

 

---

 

 

以下是老办法：

第一步先计算高度，假设宽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;
}