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

Question

我使用bootstrap来创建响应式布局。 这是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;
}

这是有效的，因为在css边距和填充百分比是相对于元素的宽度而不是高度设置的。所以当你说填充顶部是56％时，这意味着元素宽度的56％。