CSS 高度 = 宽度？

Question

在 CSS 中执行此操作的简单方法是什么？

selector {
    width: 75%;
    height: width; 
}

我尝试将高度设置为各种属性，但它们似乎没有达到我想要的效果。如何将一个值设置为另一个值？

Answer 1

Padding-top 百分比基于宽度，因此使用纯 CSS 很容易计算。

.wrapper {
  width: 50%;
  /* whatever width you want */
  display: inline-block;
  position: relative;
}
.wrapper:after {
  padding-top: 100%;
  /* 1:1 ratio, set from padding top being 100% */
  /* If you wanted one half as high, use 50% */
  
  display: block;
  content: '';
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  
  /* fill parent */
  background-color: red;
  
  /* let's see it! */
  color: white;
}

<div class="wrapper">
  <div class="main">
    This is a sample 1:1 responsive DIV. 
  </div>
</div>