使用带有响应式设计/流体宽度 CSS 的 jCrop答案

【问题标题】：Using jCrop With Responsive Design/Fluid Width CSS使用带有响应式设计/流体宽度 CSS 的 jCrop
【发布时间】：2014-01-05 17:50:13
【问题描述】：

我在为网站的移动版本在响应宽度图像上使用 Jcrop 时遇到问题。

当我将 100% 的宽度设置应用于上传的图像时 - 以允许移动设备上的用户提供成功裁剪的最佳选项，输出的裁剪不是选择的裁剪区域。

我认为，这是因为 jcrop 从真实图像的大小而不是调整大小的版本（100% 宽度）工作，但我不知道如何修复它。

我已经看到了这个question（和答案）但我不明白如何应用到我的 Jcrop 函数：

$(function(){
    $('#target').Jcrop({
            aspectRatio: 4/3,
            bgColor:     '#000',
            bgOpacity:   .4,
            onSelect: updateCoords
        });
        });
        function updateCoords(c)
        {
            $('#x').val(c.x);
            $('#y').val(c.y);
            $('#w').val(c.w);
            $('#h').val(c.h);
        };
        function checkCoords()
        {
            if (parseInt($('#w').val())) return true;
            alert('Please select a crop region then press submit.');
            return false;
        };

如果我不对上传的图片应用任何尺寸的 CSS，这会很好地工作，但是一旦我开始尝试管理要显示的图片尺寸，裁剪后的图片就会倾斜。

我认为 Google 会在这方面提供更多结果，因为我认为这是一个常见问题 - 或者我可能只是太模糊了，看不到明显的问题。

希望有人能帮忙。

【问题讨论】：

标签： jquery css responsive-design jcrop

【解决方案1】：

<code>
var jcrop_api = [];
$(document).ready(function(){
    if($('.slides-thumbs .slide-img').length > 0)
    {   
        $('.slides-thumbs .slide .slide-img').Jcrop({},function(){
            jcrop_api.push(this);
        });
    }
});

$(window).resize(function(){
    if(jcrop_api.length > 0)
    {
    /* this part remove jcrop totally and recreate with new your image with(you need set it by static or set width 100%, just remove attr style with all jcrop styles) */
        $.each( jcrop_api, function( key, api ) {
            api.destroy();
        });
        $('.slides-thumbs .slide .slide-img').removeAttr('style');
        $('.slides-thumbs .slide .jcrop-holder').remove();

        $('.slides-thumbs .slide .slide-img').each(function(){
            // reinit jcrop
            $.Jcrop(this);
        });
    }
});
</code>

希望它对 jcrop 的人有所帮助我使用 jcarousel 并有一些图像，并且需要对所有图像进行 jcrop 所以我只是将所有 inits 推入数组中，然后在调整大小时我销毁 jcrop 和他的持有者，删除样式（对于 css 调整图像大小为 %），然后重新初始化它！

【讨论】：

可以添加描述吗？

【解决方案2】：

您可以通过在 CSS 中添加以下样式来解决此问题：

.jcrop-holder img { max-width: none;} /* fix responsive issue*/

【讨论】：

【解决方案3】：

尝试将以下内容添加到您的 Jcrop 调用中：

trueSize: [oImage.naturalWidth,oImage.naturalHeight],

【讨论】：

【解决方案4】：

我曾经遇到过同样的问题，我通过将当前图像宽度（以像素为单位的 100%）和原始图像宽度发送到服务器来解决它。从那里你可以计算出你需要的一切。

【讨论】：