title: I have a image that comes from backend, and I have drawn boxes over that image, but i'm unable to draw them on specific points that I want
body: <p>I need to scale the image to my containers width and height to properly place these specific points but I'm unable to do so. </p>
  
  <p>Here is my code. </p>
  
  <pre><code>                    &lt;div class="img-magnifier-container" @click = "drawboxes"&gt;
                        &lt;b-img 
                          style= "position:relative"                      
                          :id="'og'+(i+1)"
                          :src="pageImage.pageValue"
                          class="page-image"
                        &gt;                      
                        &lt;/b-img&gt;
                        &lt;div class = "expo" style="position:absolute; left:155.76px; top:152.89px; height:2.2%; width:30.2%; border: 2px solid red;"/&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>Here I have given static div just to test. I thought I can take the natural height and width and divide that by my container height and width to get the ratio. It doesnt seem to work though. Any help is deeply appreciated.</p>