title: How to overlay a fluid image with a same-size div element?
body: <p>I have an image, which I would like :</p>
  
  <ul>
  <li>To cover maximum space of container, while fully visible and maintaining aspect ratio</li>
  <li>To be overlayed with same-size <code>div</code> element</li>
  </ul>
  
  <p>Here is the HTML, pretty basic :</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="image"&gt;&lt;!-- Image is the background of this div --&gt;
          &lt;div class="overlay"&gt;
              &lt;div class="dot"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the CSS :</p>
  
  <pre><code>html, body {
      height: 100%;
      background-color: #ddd;
  }
  .container {
      position: absolute;
      width: 80%;
      height: 80%;
      background-color: blue;
  }
  .image {
      position: relative;
      height: 100%;
      width: 100%;
      background-repeat: no-repeat;
      background-color: yellow;
      background-position: center;
      background-size: contain;
      background-image: url(http://dummyimage.com/70x40/000/fff.png)
  }
  .overlay {
      position: absolute;
      width: 100%;
      height: 100%;
  }
  .dot {
      position: absolute;
      top: 20%;
      left: 40%;
      width: 10px;
      height: 10px;
      background-color: red;
  }
  </code></pre>
  
  <p>Image covering of the container is done using the <code>contain</code> CSS property of <code>background-size</code>.</p>
  
  <p><strong>Problem is :</strong> The overlay has the wrong dimensions (<code>.container</code> instead of <code>.image</code>), so the red dot does not stick to its position relatively to the image.</p>
  
  <p><strong>Demo : <a href="http://jsfiddle.net/GTLMP/" rel="nofollow">http://jsfiddle.net/GTLMP/</a></strong></p>
  
  <p><strong>Any idea how to achieve this without javascript ?</strong></p>
  
  <p>One solution would be to add a wrapping <code>div</code> element with correct aspect ratio, then both <code>image</code> and <code>overlay</code> could be inner elements with absolute full width and height, however, I don't know how to do that in a way that this <code>div</code> would be fully fluid in the container <code>div</code></p>
  
  <p><strong>Other solution</strong>, demoed in this fiddle : <a href="http://jsfiddle.net/K4UR4/3/" rel="nofollow">http://jsfiddle.net/K4UR4/3/</a> , as suggested by MilanSxD, to use <code>inline-block</code> elements. It's partially working :</p>
  
  <ul>
  <li>In Chrome, even if initial state is Ok, vertically resizing breaks wrapper ratio</li>
  <li>In Firefox, max-height of image is not respected</li>
  </ul>