title: JCrop doesn't save selection when image size is changed
body: <p>I am using jcrop for the first time. ANd I have a problem with image size and cropping. When user upload image 1366x768 or larger I preview it on my page. I also have crop selection preview and it works fine. When I submit positions it crops fine (it's when I use original image size).<br/>
  But I don't want to display so large original images on page. User must see original image, preview and submit buttons in one view. So I need to make image smaller if image is 1366x768 I wan't to display it like 683x368. But here is the problem. When I set width and height on image tag crop not works fine anymore. I paste my code and image preview of my problem:</p>
  
  <pre><code>jQuery(window).load(function () {
  
              jQuery('#cropbox').Jcrop({
                  onChange: showPreview,
                  onSelect: showPreview,
                  setSelect: [0, 0, 540, 300],
                  allowResize: true, 
                   aspectRatio: 2
              });
  
          });
  
          function showPreview(coords) {
              if (parseInt(coords.w) &gt; 0) {
                  var rx = 540 / coords.w;
                  var ry = 300 / coords.h;
  
                  jQuery('#preview').css({
                      width: Math.round(rx * 683) + 'px',
                      height: Math.round(ry * 368) + 'px',
                      marginLeft: '-' + Math.round(rx * coords.x) + 'px',
                      marginTop: '-' + Math.round(ry * coords.y) + 'px'
                  });
              }
  
              $('#x').val(coords.x);
              $('#y').val(coords.y);
              $('#w').val(coords.w);
              $('#h').val(coords.h);
          }
  
          &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div&gt;        
          &lt;p style="width: 540px; height: 300px; overflow: hidden; float:left;"&gt;
              &lt;img id="preview" src="../../Content/Images/Full/Leopard.jpg" /&gt;
          &lt;/p&gt;
          &lt;p style="float:left;"&gt;
              &lt;img id="cropbox" width="683px" height="368px" src="../../Content/Images/Full/Leopard.jpg" /&gt;
          &lt;/p&gt;
  
          &lt;p&gt;
              @using (@Html.BeginForm("PostPicture", "Home"))
              {
                  &lt;input type="hidden" id="x" name="x" /&gt;
                  &lt;input type="hidden" id="y" name="y" /&gt;
                  &lt;input type="hidden" id="w" name="w" /&gt;
                  &lt;input type="hidden" id="h" name="h" /&gt;
                  &lt;button type="submit"&gt;
                      Send&lt;/button&gt; 
              }
          &lt;/p&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/GKEAu.png" alt="enter image description here"></p>
  
  <p>This is second error: After I multiply X and Y with 2.
  <img src="https://i.stack.imgur.com/oVzWO.png" alt="enter image description here"></p>
  
  <p>This is asp.net back end code:</p>
  
  <pre><code>public ImageResult PostPicture(int x, int y, int h, int w)
          {            
              x = x * 2;
              y = y * 2;
  
              Image image = Image.FromFile(Path.Combine(this.Request.PhysicalApplicationPath, "Content\\Images\\Full\\Leopard.jpg"));
              Bitmap cropedImage = new Bitmap(w, h, image.PixelFormat);
              Graphics g = Graphics.FromImage(cropedImage);
  
              Rectangle rec = new Rectangle(0, 0,
                                  w,
                                  h);
  
              g.DrawImage(image, rec, x, y, w, h, GraphicsUnit.Pixel);
              image.Dispose();
              g.Dispose();
  
              string savedFileName = Path.Combine(
                     AppDomain.CurrentDomain.BaseDirectory,
                     "Content", "Images", "Full",
                     Path.GetFileName("cropped.jpg"));
  
              cropedImage.Save(savedFileName);
  
              return new ImageResult { Image = cropedImage, ImageFormat = ImageFormat.Jpeg };
          }
  </code></pre>