如何使divs寬度等於其高度

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;
}

這是一個小提琴謝謝

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;
}

小提琴

Answer 2

這可能不是最佳方式，但這里是一個使用jQuery將寬度設置為窗口大小調整的div高度的示例。 這是小提琴。

$(window).resize(function() {
$('#container').width($('#container').height());
});