当宽度会根据用户的屏幕尺寸而变化时,如何将 div 的高度设置为正好是宽度的一半?
我在 div 上设置了以下...
#div1 {
min-width:400px;
width:100%;
max-width:1200px;
height:400px;
background-color:red;
}
宽度在这方面工作得很好,如果屏幕太窄它会锁定在 400 像素,如果屏幕太大它也会停止扩展到 1200 像素。但是,我也希望高度在任何给定时间都能准确地变为宽度的一半。像...
#div1 {
min-width:400px;
width:100%;
max-width:1200px;
height:width/2;
background-color:red;
}
那没有奏效(我真的没想到会这样)。
如果可能的话,我更愿意使用 CSS,但是如果用户也手动调整 Internet 窗口的大小(就像现在宽度发生的情况一样),我也希望改变高度。我不确定 CSS 是否可行,但是,如果有一种方法可以通过 Jquery 实现这一点,我也很乐意使用它。
jsFiddle of the above for reference.
谁能帮帮我?
最佳答案
如果您不介意只支持现代浏览器,您可以这样做:http://jsfiddle.net/kNPfh/
vw 测量值是视口(viewport)宽度的 1/100,因此 50vw 是屏幕宽度的 50%。
<div class='halfwidth'></div>
.halfwidth {
width: 100%;
height: 50vw;
background-color: #e0e0e0;
}
如果没有,您可以使用:http://jsfiddle.net/ff7WC/
$(window).on( 'resize', function () {
$('.halfwidth').height( $(this).width() / 2 );
}).resize();
关于jquery - 将 div 的高度设置为宽度的一半,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17672010/