title: jQuery how to scale image with markers
body: <p>I have this:</p>
  
  <pre><code>&lt;style&gt;
  #pic_wrapper{
      display: block;
      position: relative;
      padding: 0;
  }
  #selected_picture img {
      width: 100%;
      height: auto;
  }
  .pin {
      display: none; 
      position: absolute; 
      height: 50px;
      width: 50px;
      padding: 0;
      margin: 0;
  }
  &lt;/style&gt;
  
  &lt;div id="pic_wrapper"&gt;
      &lt;div id="selected_picture"&gt;
          &lt;img src="map.png" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and append markers to the image with:</p>
  
  <pre><code>&lt;script type="text/javascript" charset="UTF-8"&gt;
  $(function(){
      $('#selected_picture').on('click', function(e){
          offset = $('#selected_picture').offset();
          x = e.pageX - offset.left - 25;
          y = e.pageY - offset.top - 25;
          var pin = $('&lt;div class="pin"&gt;&lt;img class="pin-img" src="pin.png" /&gt;&lt;/div&gt;');
          pin.uniqueId();
          $('#pic_wrapper').append(pin);
          pin.css('left', x).css('top', y).show();
  </code></pre>
  
  <p>I need to scale the #selected_picture together with all pins so that they remain at the same relative positions.</p>
  
  <p>I found this example for text in a div: <a href="https://codepen.io/chriscoyier/pen/VvRoWy" rel="nofollow noreferrer">https://codepen.io/chriscoyier/pen/VvRoWy</a></p>
  
  <p>But I can figure out how to apply the approach to my resizable picture with absolutely positioned pins on it.</p>
  
  <p>Thank you for your help.</p>