[英]How to make a divs width equal to its height
I am building a responsive website which means I cannot deal in fixed widths and heights. 我正在建立一个响应式网站,这意味着我不能处理固定的宽度和高度。 In theory, the container should be 60% the width of the page and the height must match that. 理论上,容器应该是页面宽度的60%,高度必须与之相匹配。 The question: how do i maintain the same width and height on a responsive page. 问题是:如何在响应式页面上保持相同的宽度和高度。
<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;
}
This may not be the optimal way, but here is an example using jQuery to set the width to the height of the div on window resize. 这可能不是最佳方式,但这里是一个使用jQuery将宽度设置为窗口大小调整的div高度的示例。 Here's the fiddle. 这是小提琴。
$(window).resize(function() {
$('#container').width($('#container').height());
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.