A Pen by InSuperposition.

index.html

 <div class="resp-rect__boundry">
   <div class="resp-rect fontawesome-play-circle">
        <img class="resp-rect__streched-element" src="http://placekitten.com/203/203" />
    </div>
   <div class="resp-rect fontawesome-play-circle">
        <img class="resp-rect__streched-element" src="http://placekitten.com/204/204" />
    </div>
   <div class="resp-rect fontawesome-play-circle">
        <img class="resp-rect__streched-element" src="http://placekitten.com/201/201" />
    </div>
   <div class="resp-rect fontawesome-play-circle">
        <img class="resp-rect__streched-element" src="http://placekitten.com/200/200" />
    </div>
    <div class="resp-rect fontawesome-play-circle">
        <img class="resp-rect__streched-element" src="http://placekitten.com/300/300" />
    </div>
    <span class="resp-rect fontawesome-play-circle">
        <img class="resp-rect__streched-element" src="http://placekitten.com/299/299" />
    </span>
    <div class="resp-rect ">
      <a class="resp-rect__streched-element fontawesome-play-circle" href="http://www.facbook.com">
          <img class="resp-rect__streched-element fontawesome-play-circle" src="http://placekitten.com/302/302" />
        </a>
        
    </div>
    <div class="resp-rect">
        <img  class="resp-rect__streched-element"  src="http://placekitten.com/303/303" />
    </div>
       <div class="resp-rect">
        <img class="resp-rect__streched-element" src="http://placekitten.com/304/304" />
    </div>
    <div class="resp-rect">
        <img class="resp-rect__streched-element" src="http://placekitten.com/305/305" />
    </div>
    <div class="resp-rect">
        <img class="resp-rect__streched-element" class="fontawesome-play-circle" src="http://placekitten.com/306/306" />
    </div>
    <div class="resp-rect">
        <iframe  class="resp-rect__streched-element fontawesome-play-circle" src="//player.vimeo.com/video/55463180" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
</div>

Responsive-rectangles-B-.markdown

Responsive rectangles B

Code modified from http://jsfiddle.net/4E2bV/1/

A Pen by InSuperposition on CodePen.

License.

style.css

@import url(http://weloveiconfonts.com/api/?family=fontawesome);

/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
  
  display:inline-block;
  color:white;
  
  /* relative to */
  position: relative;
  z-index:1;
  
  /*Tweak font */
  font-size: 4em;
  top: 35%;
  left: 2.5%;
}

body{
  margin: 10% auto;
  text-align: center;

}
.resp-rect__boundry{
   display: inline-block;
   width: 80%;
}

.resp-rect {
   display: inline-block;
    position: relative;
    float: left;
    height: 0;
  
    /* These values determine rect's ratio*/
    width: 33.33333%;
    padding-bottom: 33.33333%;
    /* Use margin to create*/
    margin: 0;
  
    background-color:lightblue;
}

.resp-rect:nth-child(6n + 1),
.resp-rect:nth-child(6n + 2),
.resp-rect:nth-child(6n + 3){
  float:left;
}


.resp-rect:nth-child(6n + 5),
.resp-rect:nth-child(6n + 2),
.resp-rect:nth-child(6n + 3){
  float:right;
}

.resp-rect__streched-element{
    width: 100%;
    height: 100%;
    position: absolute;
    top: bottom;
    right:0;
    left:0;
}