<main>
  <figure class="img1">
    <img src="http://www.lorempixel.com/960/475/" alt="Image 1" width="960" height="475">
  </figure>
  <div class="frame">
    <figure class="img2 abs">
      <img src="http://www.lorempixel.com/600/360/" alt="Image 1" width="600" height="360">
    </figure>
    <figure class="img3 abs">
      <img src="http://www.lorempixel.com/360/600/" alt="Image 1" width="360" height="600">
    </figure>
    <figure class="img4 abs">
      <img src="http://www.lorempixel.com/600/360/" alt="Image 1" width="600" height="360">
    </figure>
    <figure class="img5 abs">
      <img src="http://www.lorempixel.com/360/600/" alt="Image 1" width="360" height="600">
    </figure>
    <figure class="img6 abs">
      <img src="http://www.lorempixel.com/240/240/" alt="Image 1" width="240" height="240">
    </figure>
  </div>
  <figure class="img1">
    <img src="http://www.lorempixel.com/960/250/" alt="Image 1" width="960" height="250">
  </figure>
</main>

body {
  background: #000;
  margin: 0;
}
main {
  background: #fff;
  max-width: 960px;
  margin: 0 auto;
  padding: 0;
}
.img1 {
  margin: 1em 0;
}
img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
.frame {
  padding: 0;
  margin: 0;
  position: relative;
  padding-bottom: 100%;
  background: red;
}
.abs {
  position: absolute;
  margin: 0;
}
.img2 {
  top:0;
  left: 0;
  width: 62.5%;
}
.img3 {
  top:0;
  right: 0;
  width: 37.5%;
}
.img4 {
  bottom:0;
  right: 0;
  width: 62.5%;
}
.img5 {
  bottom:0;
  left: 0;
  width: 37.5%;
}
.img6 {
  top:37.5%;
  left: 37.5%;
  width: 25%;
}