title: Mosaic of images HTML/CSS
body: <p>I want to make an image layout with <strong>portrait images</strong> inside a <code>div</code> with a fixed aspect ratio of <code>3:2</code>. The size of images is <code>327x491px</code>. </p>
  
  <p>The main issue is unwanted spaces between images. How do I <strong>align images as a mosaic</strong> using only <em>HTML/CSS</em>?</p>
  
  <p><em>HTML :</em></p>
  
  <pre><code>&lt;div id="pictures1" class="_pictures1 grid"&gt;
      &lt;div class="_pictures1-01"&gt;&lt;div style="width:125px;height: 188px; background: red;"&gt;&lt;img src="" width="125" height="188" alt="" /&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;div class="_pictures1-02"&gt;&lt;div style="width:192px;height: 288px;background: green;"&gt;&lt;img src="" width="192" height="288" alt="" /&gt;&lt;/div&gt;&lt;/div&gt;
       ... SO ON ...
  &lt;/div&gt; 
  </code></pre>
  
  <p><em>CSS :</em></p>
  
  <pre><code>._pictures1 {
      width: 935px; height: 490px;
      margin: -26px 0 0 59px;
      float: left;
      top: 20%; left: 20%;
      position: absolute;
      border: 1px gray solid;
  }
  ._pictures1 div {position: absolute;}
  ._pictures1-01 {top: 0px; left: 35px;}
  ._pictures1-02 {top: 200px; left: 0px;}
  /* ... SO ON ... */
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Jd4z4/1/" rel="noreferrer">jsfiddle</a></p>