将一个div的高度设置为宽度的一半。

Question

当宽度会根据用户屏幕大小而变化时，我如何将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供参考。

有人能帮帮我吗？

- Flickdraw

Answer 1

如果你只需要支持现代浏览器，你可以这样做：http://jsfiddle.net/kNPfh/

vw单位是相对于视口宽度的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();

- Dom Day

---

对此进行了一些编辑，现在它完全按照我的预期工作。http://jsfiddle.net/R5WqL/ 谢谢！出于好奇，哪些版本的IE支持第一个选项？ - Flickdraw

@DomDay：你能提供一下这种类型值的文档链接吗？ - Michael Walter

@MichaelWalter，如果你需要权威的定义，请点击这里w2c链接，如果你需要浏览器兼容性信息，请点击这里浏览器兼容性链接。除此之外，谷歌搜索也可以帮到你。 - Dom Day

太酷了！还有hv可以用来控制高度。太棒了，我已经很久没有处理前端了。很多方面都朝着好的方向发展了。我记得以前唯一可能的方法就是写一长串的JavaScript代码！ - andilabs

当然！我知道vw单位，但直到看到你的回答之前，我花了几个小时在CSS3 calc函数上玩耍。 - ffflabs

Answer 2

您可以通过在父元素上使用padding来实现，因为相对填充（甚至是高度方面）基于元素的宽度。

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);

请在左侧点击勾号，选择此答案作为解决您疑问的正确答案。

- damien hawks

Answer 3

确保您拥有一个js文件，然后使用以下代码：

$(window).load(function(){
    $('.element').height($('.element').width() / 2);
    $(window).resize(function(){
        $('.element').height($('.element').width() / 2);
    });
});

http://jsfiddle.net/Hive7/8CNtU/2/

- user2568107