将div的高度设置为宽度的一半
当宽度根据用户屏幕大小改变时，如何将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以供参考。
谁能帮我？
如果你只支持现代浏览器，你可以这样做： http ： //jsfiddle.net/kNPfh/
vw度量是视口宽度的1/100，因此50vw是屏幕宽度的50％。
.halfwidth { width: 100%; height: 50vw; background-color: #e0e0e0; }
如果没有，你可以使用： http ： //jsfiddle.net/ff7WC/
$(window).on( 'resize', function () { $('.halfwidth').height( $(this).width() / 2 ); }).resize();
确保你有一个js文件然后使用它
$(window).load(function(){ $('.element').height($('.element').width() / 2); $(window).resize(function(){ $('.element').height($('.element').width() / 2); }); });
您可以在父项的填充帮助下执行此操作，因为相对填充（即使是高度方式）也基于元素的宽度。
CSS：
.imageContainer { position: relative; width: 25%; padding-bottom: 25%; float: left; height: 0; } img { width: 100%; height: 100%; position: absolute; left: 0; }
有关详细信息，请参阅有关主题的文章http://wemadeyoulook.at/how-we-think-about/proportional-scaling-responsive-boxes
您也可以使用jquery，例如：
$('.ss').css('height',width()/2);
如果通过单击左侧的刻度符号来解决您的疑问，请选择此作为正确答案。
纯CSS无法实现这一点。 你必须使用jQuery来创建新的大小。 我在SO中找到了这个： 使用jQuery获取Viewport的大小