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

Answer 2

这可能不是最佳方式，但这里是一个使用jQuery将宽度设置为窗口大小调整的div高度的示例。 Here's the fiddle.

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

如何使divs宽度等于其高度

2 个答案: