[html] 第610天 写一个布局，它的宽度是不固定的100%，如何让它的宽度始终是高度的一半呢？

[haizhilin2013]

第610天 写一个布局，它的宽度是不固定的100%，如何让它的宽度始终是高度的一半呢？

3+1官网

我也要出题

[wheatup]

利用padding和margin使用百分比时以元素宽度为基准的特性，可以以此固定元素的宽高比：

<div class="ratio" style="--ratio: 0.5;"></div>

.ratio {
  background-color: salmon;
  position: relative;
}

.ratio::before {
  content: '';
  display: block;
  padding-top: calc(1 / var(--ratio) * 100%);
}

[shuaibichuang]

width:50vh;
height:100vh;

[FreddyZeng]

em,宽度为1.0,高度为0.5

[wind8866]

原理：padding-bootom如果是百分比，是相对于父元素宽度的百分比。

<div class="wh-wrap">
  <div class="width-height2"></div>
</div>

.wh-wrap {
  width: 100px;
}
.width-height2 {
  width: 100%;
  padding-bottom: 200%;
  background: #daf;
}