title: Fluid image adapts size according to screen size
body: <p>I have the following HTML:</p>
  
  <pre><code>&lt;img src="https://www.sporedev.ro/pleiade/images/Maya.jpg" class="full-img"&gt;
  &lt;img src="https://www.sporedev.ro/pleiade/cufar.png" class="treasure treasure-maya"&gt;
  </code></pre>
  
  <p>And the following CSS:</p>
  
  <pre><code>.full-img{
      display: block;
      width: 100%;
      height: 100%;
      height: 100vh;  
  }
  .treasure{
  height: 125px;
  width:  120px;
  } 
  
  .treasure-maya{
      position: absolute; 
      top: 55%; 
      left: 44%;
      z-index: 2;
  }
  </code></pre>
  
  <p>The reason why I use <code>img</code> instead of the CSS much simpler method, <code>background-image</code>, is because the image is being used as an image map.</p>
  
  <p><a href="https://jsfiddle.net/5xnfmeLp/" rel="nofollow noreferrer">Here is a JSFiddle.</a></p>
  
  <p><a href="https://sporedev.ro/pleiade/maya2.html" rel="nofollow noreferrer">Here is a link to my live project.</a></p>
  
  <p>I tried adapting the <code>.treasure</code> image to the <code>.full-img</code> so that, when the <code>.full-img</code> is reducing in size, the <code>.treasure</code> image keeps its position and ratio.</p>
  
  <p>I managed to find a solution, using media queries, but it's really counter-productive because I'd have to take into account <strong>a lot</strong> of different resolutions. I already added three media queries and that only takes care of <strong>some</strong> of the resolutions that I'd need to take into account (probably around 20 media queries).</p>
  
  <p>I looked on Google and SO for a solution for my problem but I couldn't find an answer.</p>
  
  <p>What I'd need, is to somehow make the <code>.treasure img</code> reduce in size together with the <code>.full-img img</code>.</p>
  
  <p>Is this achievable? </p>
  
  <p>If there's a way to do this in CSS I'd prefer that. If not, I guess that JS would be the only way to do it but, unfortunately, I'm a novice when it comes to JS. </p>