如何将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,但是如果用户手动调整互联网窗口的大小(如当前的宽度会发生什么变化),我也希望改变高度.我不知道这是可能的CSS,但是,如果有一种方法来实现这一点,Jquery我也很乐意使用它.
jsFiddle of the above for reference.
有人可以帮我吗
解决方法
如果您只支持现代浏览器,您可以这样做：
http://jsfiddle.net/kNPfh/
视频宽度是视口宽度的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();
