自舉-根據寬度調整元素的高度

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

之所以可行，是因為在CSS中，邊距和填充百分比是相對於元素的寬度而不是高度來設置的。 因此，當您說padding-top是56％時，表示元素寬度的56％。