title: Element positioning over scaled SVG
body: <p>I have an SVG image scaled to the size of the window. An element should be placed above the image relative to its size. As the size of the image changes in different browser windows, the positioning parameter should for example be something like 30% of the picture width from the left.</p>
  
  <p>The problem is, that the browser adds a "padding" to maintain the aspect ratio. However this "padding" is not CSS and I have not found any way to access any data of the image rendering parameters.</p>
  
  <p>Sounds complicated? Here is an external <a href="https://jsfiddle.net/SamLowrie/amh7kes1/" rel="nofollow noreferrer">fiddle</a> or see the same code below (problem only shows in fullscreen mode). When resizing the browser window, the hashtag should stay at the same position above the image, however it moves arround, as padding is added on the sides of the image.</p>
  
  <p>I could not find any way to access the svg properties to get something like the actual image origin (minus the padding) or the actual image size. Any solution with js, JQuery, css, etc. is fine.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    overflow: hidden;
  }
  
  img#test {
    position: absolute;
    height: 100%;
    width: 100%;
  }
  
  div#test {
    position: absolute;
    padding-left: 31%;
    padding-top: 8%;
    color: #000;
    font-size: 50px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
    &lt;body&gt;
  
      &lt;img src='data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTAwIDEwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KICA8cGF0aCBkPSJNNjUsMjBhMTUsMTUsMCwxLDEsMTUsMTVoLTYwYTE1LDE1LDAsMSwxLDE1LTE1djYwYTE1LDE1LDAsMSwxLTE1LTE1aDYwYTE1LDE1LDAsMSwxLTE1LDE1eiIgc3Ryb2tlPSIjRDcwIiBzdHJva2Utd2lkdGg9IjgiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg=='
        id='test'&gt;
  
      &lt;div id='test'&gt;#&lt;/div&gt;
  
    &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Update:</strong></p>
  
  <p>The answer from ccprog worked out great, but it gave me a bit of a headache to work out the correct aspect ratio. Here is an example for the correct settings, when the aspect ratio is not 1:1 (as in the example):</p>
  
  <ul>
  <li>Image-Resolution: 544 x 400 (width x height)</li>
  <li>Aspect-Ratio (width:height) : 544 / 400 = 1.36 => 1.36:1 => 136:100</li>
  <li>Aspect-Ratio (height:width) : 400 / 544 = 0.73529... => 74:100</li>
  </ul>
  
  <p>The resulting media queries then look like this:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>media (min-aspect-ratio: 136/100) {
    .box {
       width: 136vh;
       height: 100vh;
    }
  }
  
  @media (max-aspect-ratio: 136/100) {
    .box {
       width: 100vw;
       height: 74vw;
    }
  }</code></pre>
  </div>
  </div>
  </p>