jcropjavascript图像预览失真

我一直在尝试实现Jcrop，这样当用户上传他们的图像时，他们就能够裁剪他们的图像，并在预览中看到这种裁剪的效果

最后一切都很好，除了预览，它似乎在拉伸我的图像并扭曲它们的宽度

我目前的代码如下：

Crop.html.erb

<% content_for :head do %>
    <script type="text/javascript" charset="utf-8">
        $(function() {
          $('#cropbox').Jcrop({
            onChange: update_crop,
            onSelect: update_crop,
            setSelect: [0, 0, 300, 300],
            aspectRatio: 1
          });
        });

        function update_crop(coords) {
            var rx = 100/coords.w;
            var ry = 100/coords.h;
            var lw = $('#cropbox').width();
            var lh = $('#cropbox').height();
            var ratio = <%= @user.avatar_geometry[:width] %> / lw ;

          $('#preview').css({
            width: Math.round(rx * lw) + 'px',
            height: Math.round(ry * lh) + 'px',
            marginLeft: '-' + Math.round(rx * coords.x) + 'px',
            marginTop: '-' + Math.round(ry * coords.y) + 'px'
          });
          $("#crop_x").val(Math.round(coords.x * ratio));
          $("#crop_y").val(Math.round(coords.y * ratio));
          $("#crop_w").val(Math.round(coords.w * ratio));
          $("#crop_h").val(Math.round(coords.h * ratio));
        }
    </script>
<% end %>

<%= image_tag @user.avatar_url(:normal), :id => "cropbox" %>

<h3>Preview</h3>
<div class="preview">
    <%= image_tag @user.avatar_url(:thumb), :id => "preview" %>
</div>

<%= form_for @user do |f| %>
    <% for attribute in [:crop_x, :crop_y, :crop_h, :crop_w] %>
        <%= f.hidden_field attribute, :id => attribute %>
    <% end %>
    <p><%= f.submit "Crop" %></p>
<% end %>

$（函数（）{
$（'#cropbox'）.Jcrop({
onChange：更新作物，
onSelect：更新作物，
setSelect:[0,0,300,300]，
方面：1
});
});
功能更新\u裁剪（coords）{
var rx=100/coords.w；
var ry=100/coords.h；
var lw=$（'#cropbox'）.width（）；
var lh=$（'#cropbox'）.height（）；
风险值比率=/lw；
$（'#预览'）.css({
宽度：数学圆（rx*lw）+“px”，
高度：数学圆（ry*lh）+“px”，
marginLeft:“-”+数学圆（rx*coords.x）+“px”，
marginTop:“-”+数学圆（ry*coords.y）+“px”
});
$（“#crop_x”）.val（数学整数（coords.x*比率））；
$（“#crop_y”）.val（数学圆（coords.y*比率））；
$（“#crop_w”）.val（数学圆整（coords.w*ratio））；
$（“#crop_h”）.val（Math.round（coords.h*ratio））；
}
“cropbox”%>
预览
“预览”%>
属性%>

---

如果有人知道我错在哪里就好了？提前感谢您的帮助

确保图像预览的css容器没有设置宽度和高度。实际上，您只能设置其中的一个，浏览器将进行缩放。您好@jvnill，我是否应该在宽度或高度上设置高度？我试着只设置其中一个，当移动裁剪器元素时，图像的大小会增加。如果你还有什么建议，我将不胜感激：）嘿，汤姆，对不起。如果不认真研究这个问题和代码，我一点也帮不上忙。如果您可以为这个问题创建一个JSFIDLE，这将是一个很大的帮助：）嘿，Jvnill，再次感谢您的回复。我已经成功地让JSFIDLE工作了一半，但是没有得到Jcrop覆盖（非常抱歉Javascript不是我的强项）。这是非常接近工作，可以在这里找到我将更新链接，如果我设法让它工作：）供参考（代码从演示）