How to zoom image based off JQuery UI range slide value?
<p>I am trying to zoom in and out of an image based off the value of a <a href="https://jqueryui.com/slider/" rel="nofollow">JQuery UI slider</a>. I have two issues, one I need to keep the image centered as it zooms in and out. And two, sometimes the image scales smaller when it should be scaling larger. That probably has to do with the math involved, but how can I fix this? </p>

<p>You can see my code <a href="http://codepen.io/ameliarae/pen/KVBBYY" rel="nofollow">here.</a> </p>

<p>Here's my HTML:</p>

<pre><code>&lt;div class="zoom-me"&gt;
   &lt;img src="http://theartmad.com/wp-content/uploads/Happy-Fairy-Tail-Wallpaper-5.jpg"&gt;
  &lt;/div&gt;
&lt;/div&gt;  
&lt;div id="range5"&gt;&lt;/div&gt;
</code></pre>

<p>Here's my CSS:</p>

<pre><code>img {
   position:absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
  width:200%;

}
.zoom-me {
  background-color: blue;
    overflow: hidden;
    border: 10px solid white;
    max-width: 400px;
    width: 400px;
    position: relative; 
    display: block;
    margin: 0 auto; 
    height: 260px;
}
#range5 {
  position: absolute;
  width: 300px;
  top: 75%;
  left: 20%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border: 0;
  height: 13px;
  -webkit-border-radius: 0%;
  border-radius: 0%;
  background: #e6e7e8;
  outline: none;
}
#range5 .ui-slider-handle{
  position: absolute;
  margin: -18px 0 0 -9px;
  -webkit-border-radius: 0%;
  border-radius: 0%;
  background: #0B5788;
  border: 0;
  height: 20px;
  width: 11px;
  outline: none;
  cursor: pointer;
}
#range5 .ui-slider-range{
  background: #0d78bd;
  height: 13px; 
}
</code></pre>

<p>And here's my JS:</p>

<pre><code>$('#range5').slider({
    range: 'min',
    max: 500,
    step: 100,
    value: 50,
    slide: function (e, ui) {
        var cv = $('#range5').slider( "value" );
      $('img').animate({
       width: 200 - cv/5 + "%",
       height: 200 - cv/5 + "%"},500);

    } 
});
</code></pre>