frame display

by Emily Humphrey

HTML

<div class="frame">
  <div class="frame-display"></div>
  <div class="frame-display"></div>
  <div class="frame-display"></div>
  <div class="frame-display"></div>
  <div class="frame-display"></div>
  <div class="frame-display"></div>
  <div class="frame-display"></div>
  <div class="frame-display"></div>
</div>

CSS

*{
  box-sizing: border-box;
}
.frame-contain{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
 }
.frame{
  display: block;
  height: 100%;
  width: 100%;
}
.frame-display{
  display: block;
  background: #333;
  border: 1px solid red;
}

JavaScript

frameOff()

function frameOff(){
	var frame = $(".frame");
  var frames = $(".frame-display");
  var frameH = frame.height();
  var frameW = frame.width();
  
  frames.each(function(){
    $(this).css({
      "height": frameH+"px",
      "width": frameW+"px"
    });
  });
  
  frame.css({
    "height": (frameH*(frames.length/2))+"px",
    "width": (frameW*(frames.length/2))+"px"
  });

}