title: invariant scaling for CSS based image map
body: <p>I'm using a CSS based image-map, which I want to display correctly whatever the size of the browser window. Of course there are actually multiple links.</p>
  
  <p>My HTML ... </p>
  
  <pre><code>&lt;div id="sitemap" &gt;
    &lt;img src="img.jpg" class="center"/&gt;
    &lt;a href="url1.html"    id='id1'&gt;&lt;/a&gt;
  &lt;/div
  </code></pre>
  
  <p>And the CSS ...</p>
  
  <pre><code>#sitemap img{
    max-width: 100vw;
    max-height: 100vh;
    position: relative;
  }
  #sitemap a {
    display: block;
    position: absolute;
  }
  #sitemap a:hover {
    background: rgba(255, 255, 0, 0.5);
    border-radius: 20px;
  }
  a#archive { 
    top: 48%;
    margin-left: 14%;
    width: 20%;
    height: 15%;
  }
  </code></pre>
  
  <p>This works great in a tall, narrow browser, but when the browser window is wider than it is tall, the percentages consider the dead space in the blank sidebars. How can I make the percentages consider only the actuall image?</p>