Bootstrap- resize heigh of element according the width

I use bootstrap to create responsive layout. Here is the jsF http://jsfiddle.net/sarit8/8vqop6dz/

I have few issues:

  1. I try to use a script which apparently doesn't work.
  2. In case I add the following static style I can see the squares but there are too much spaces between some of them , and page is not responsive:
.black{background-color:black; float:left; width:100%;}
.black.double{height: 490px;}

Answers


You can use just css to achieve the desired result, no js necessary,

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

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

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

this works because in css margin and padding percentages are set relative to the width of an element rather than the height. so when you say the padding-top is 56%, that means 56 percent of the width of the element.


Need Your Help

Issue on Deploying Node.js & Socket.IO App to Nodejitsu

node.js socket.io nodejitsu

I am new at Node.js, Socket.IO, and Nodejitsu. I am also running Ubuntu on my machine. After Googling for free hoisting supports for Node.js and Socket.IO, I find the Nodejitsu hosting platform. Th...

What's the difference between nohup and ampersand

linux bash nohup

Both nohup myprocess.out & or myprocess.out & set myprocess.out to run in the background. After I shutdown the terminal, the process is still running.