jquery - 如何使div的宽度等于它的高度

Question

我正在构建一个响应式网站，这意味着我无法处理固定的宽度和高度。理论上，容器应该是页面宽度的 60%，并且高度必须与之匹配。问题:如何在响应式页面上保持相同的宽度和高度。

    <div id="container">
      <div id="circle">
      </div>
    </div>

#container {
   height:400px; width: 400px;
   padding:1%;
}
#circle {
   background-color:blue;
   border-radius:50%;
   height:96%; width:96%;
   position:absolute;
}

这是一个fiddle谢谢

Answer 1

好的，现在我明白你的问题了。

使用这个 CSS

#container {
   padding-bottom:100%;
   position:relative;
   width: 60%;
   height: 100%;
}
#circle {
   background-color:blue;
   border-radius:50%;
   width:96%;
   padding-bottom:100%;
   position:absolute;
}

Fiddle