Bootstrap-根据宽度调整元素的高度

Question

我使用引导来创建响应式布局。 这里是JSF http://jsfiddle.net/sarit8/8vqop6dz/

我有几个问题：

1. 我尝试使用脚本，这显然是行不通的。
2. 如果我添加下面的静态的风格，我可以看到的平方，但也有一些他们之间太多的空间，页面不响应：

.black{background-color:black; float:left; width:100%;} 
.black.double{height: 490px;} 

Answer 1

您可以只CSS使用达到预期的效果，没有必要的js，

http://jsfiddle.net/8vqop6dz/1/

.black { 
    padding-top: 56%; 
    width: 100%; 
    position: relative; 
} 

.black > * { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

这个工程becau在CSS余量和填充百分比中的se是相对于元素的宽度而不是高度来设置的。所以当你说填充顶部是56％时，这意味着元素宽度的56％。