title: How to resize an image depending on div height and position selected of a cover photo?
body: <p>I have a cover profile photo that can be changed in my web app like facebook cover profile photo. I have implemented the function of repositioning the photo with <code>jquery UIdraggable</code> plugin and the upload  new photo function is implemented too.</p>
  
  <p>for the repositioning this is how I proceeded:</p>
  
  <ul>
  <li><p>add a hidden input field on the form and save the latest <code>top</code> value</p></li>
  <li><p>when loading the page the <code>top</code> value is set to the saved value on the database.</p></li>
  </ul>
  
  <p>for example this is a case on my PC screen with a top set to <code>top: -166px;</code> 
  <a href="https://i.stack.imgur.com/gF0pt.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gF0pt.jpg" alt="enter image description here"></a></p>
  
  <p>and this what I have on the mobile view :</p>
  
  <p><a href="https://i.stack.imgur.com/anOek.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/anOek.png" alt="enter image description here"></a></p>
  
  <p>every thing is working fine on my PC screen. the problem is that on small devices it's not the same position of the photo that I have repositionned rather there are some problems with dragging the photo on some small devices .</p>
  
  <p>Do somebody have anidea how to correct this ? 
  Or Is there any other plugin that do this thing ?</p>
  
  <p>Thanks in advance .</p>