<!DOCTYPE html>

<html>
  <head>
    <style type="text/css">
    .group > div {
        display: inline-block;
        overflow: hidden;
        width: 100px;
        height: 100px;
        margin: 2px 10px;
        border: 1px solid black;
        background-color: gray;
    }

    .group img { display: block; }
    .contain img { width: 100%; }
    .contain > *:nth-child(1) * { margin-top: 25px; }
    .contain > *:nth-child(2) * { margin-left: 20px; margin-top: 10px; }
    .contain > *:nth-child(3) * { margin-top: 13px; }
    .contain > *:nth-child(4) * { margin-left: -10px; margin-top: 40px; }
    .contain > *:nth-child(5) * { margin-top: 45px; }

    .fill img { height: 100%; width: 100%; }
    .fill > *:nth-child(1) * { }
    .fill > *:nth-child(2) * { margin-left: 20px; margin-top: 10px; }
    .fill > *:nth-child(3) * { }
    .fill > *:nth-child(4) * { margin-left: -10px; margin-top: -10px; }
    .fill > *:nth-child(5) * { }
    </style>
  </head>
  <body>

  <div class="contain group">
      <div><img src="../resources/circles-landscape.png"></div>
      <div><img src="../resources/circles-landscape.png"></div>
      <div><img src="../resources/circles-landscape.png"></div>
      <div><img src="../resources/circles-landscape.png"></div>
      <div><img src="../resources/circles-landscape.png"></div>
  </div>

  <div class="fill group">
      <div><img src="../resources/circles-landscape.png"></div>
      <div><img src="../resources/circles-landscape.png"></div>
      <div><img src="../resources/circles-landscape.png"></div>
      <div><img src="../resources/circles-landscape.png"></div>
      <div><img src="../resources/circles-landscape.png"></div>
  </div>

  </body>
</html>
