Q:

Element positioning over scaled SVG

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.
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.
Sounds complicated? Here is an external fiddle 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.
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.

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;
}
<html>

  <body>

    <img src='data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTAwIDEwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KICA8cGF0aCBkPSJNNjUsMjBhMTUsMTUsMCwxLDEsMTUsMTVoLTYwYTE1LDE1LDAsMSwxLDE1LTE1djYwYTE1LDE1LDAsMSwxLTE1LTE1aDYwYTE1LDE1LDAsMSwxLTE1LDE1eiIgc3Ryb2tlPSIjRDcwIiBzdHJva2Utd2lkdGg9IjgiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg=='
      id='test'>

    <div id='test'>#</div>

  </body>

</html>

Update:
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):

Image-Resolution: 544 x 400 (width x height)
Aspect-Ratio (width:height) : 544 / 400 = 1.36 => 1.36:1 => 136:100
Aspect-Ratio (height:width) : 400 / 544 = 0.73529... => 74:100

The resulting media queries then look like this:

media (min-aspect-ratio: 136/100) {
  .box {
     width: 136vh;
     height: 100vh;
  }
}

@media (max-aspect-ratio: 136/100) {
  .box {
     width: 100vw;
     height: 74vw;
  }
}

A:

As long as you know the aspect ratio in advance, there are some CSS features you can combine.

a aspect-ratio media query can decide whether the screen size is wider or smaller than the image aspect ratio
depending on that, use vh units for wide screens and vw units for small ones to size a wrapping div with the same aspect ratio as the image
use flex layout to position it in the middle of the screen, mimicking the behaviour of the SVG view box.

Then you can position your element in that outer div.
The following example uses your image with an aspect ratio of 1/1. For other values, you would have to replace that in the media query and adjust the width for wide screens and the height for small screens to get the right ratio.
I've given the wrapping div a blue border to show the effect.

body {
    overflow: hidden;
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

img#test {
  position: absolute;
  height: 100%;
  width: 100%;
}

.box {
    border: 1px solid blue;
    box-sizing: border-box;
    position: relative;
}
.hash {
    position: absolute;
    left: 31%;
    top: 8%;
    color: #000;
    font-size: 50px;
}

@media (min-aspect-ratio: 1/1) {
    .box {
        width: 100vh;
        height: 100vh; /* stays constant for all ratios */
    }
}
@media (max-aspect-ratio: 1/1) {
    .box {
        width: 100vw; /* stays constant for all ratios */
        height: 100vw;
    }
}
<img src='data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTAwIDEwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KICA8cGF0aCBkPSJNNjUsMjBhMTUsMTUsMCwxLDEsMTUsMTVoLTYwYTE1LDE1LDAsMSwxLDE1LTE1djYwYTE1LDE1LDAsMSwxLTE1LTE1aDYwYTE1LDE1LDAsMSwxLTE1LDE1eiIgc3Ryb2tlPSIjRDcwIiBzdHJva2Utd2lkdGg9IjgiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg=='
  id='test'>
<div class="box">
    <div class="hash">#</div>
<div>

