css宽度与高度不相同

Question

我试过这个但没有工作。

div {
    background:orange;
    height:20%;
    padding-left:20%;
}

宽度与窗口宽度的百分比相关。 我希望宽度等于高度百分比值，并且仅使用css。

here我得到了那个

请帮助。

Answer 1

如果您可以更改标记，您可以添加另一个div并添加一些伪元素来实现此目的。使用以下标记。

<div class="parent">
 <div class="child"></div>
</div>

＆＃13;

＆＃13;

div.child {
  background: orange;
  height: 20%;
  margin-right: 80%;
}
.child:after {
  content: "";
  display: block;
  padding: 50% 0%;
}
div.parent {
  width: 100%;
  height: 100%:
}

＆＃13;

<div class="parent">
  <div class="child"></div>
</div>

＆＃13;

＆＃13;

＆＃13;