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

Posted 2023-03-06

【中文标题】使用带有响应式设计/流体宽度 CSS 的 jCrop

【英文标题】：Using jCrop With Responsive Design/Fluid Width CSS

【发布时间】：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 会在这方面提供更多结果，因为我认为这是一个常见问题 - 或者我可能只是太模糊了，看不到明显的问题。

希望有人能帮忙。

【参考方案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%）和原始图像宽度发送到服务器来解决它。从那里你可以计算出你需要的一切。