css寬度與高度不一致

Question

我試過這個，並沒有工作。

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

寬度與百分比窗口寬度相關。 我想使寬度與百分比值中的高度相等，並只用css來完成。

here在那裏我得到了

任何幫助，請。

Answer 1

提供你可以改變標記，你可以添加另一個div，並添加一些僞元素來實現。使用下面的標記。

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

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

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