使用jCrop响应设计/流体宽度CSS [英] Using jCrop With Responsive Design/Fluid Width CSS

问题描述

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

I'm having trouble using Jcrop on responsive width images for the mobile version of a site.

当我对上传的图片应用宽度设置100％ - 允许移动设备上的用户提供成功的作物的最佳选择，输出的作物不是选择的作物区域。

When I apply a width setting of 100% to the uploaded image - to allow a user on a mobile device the best option of providing a successful crop, the outputted crop is not the crop area chosen.

这是因为，到jcrop从真正的图像的大小，而不是调整大小的版本（100％宽度），但我不知道如何解决它。

This is due, I think, to jcrop working from the size of the true image, not the resized version (100% width), but I don't know how to fix it.

这个问题（和答案），但我不明白如何申请我的Jcrop函数：

I have seen this question (and answer)but I don't understand how to apply to my Jcrop function:

$(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，我开始尝试管理显示的图片大小，裁剪的图片是扭曲的。

This works beautifully if I don't apply any size CSS to the uploaded image, but as soon as I start trying to manage the images size for display, the cropped image is skewed.

我认为谷歌会抛出更多的结果，因为我会期望它一个常见的问题 - 或者我太昏暗了，看不出来。

I thought Google would have thrown up more results on this as i would expect it to be a common problem - or maybe I'm just too dim to see the obvious.

我希望有人能帮助你。

推荐答案

<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
i使用jcarousel和有几个图像，需要有jcrop所有的
所以我只是推所有的in数组，然后在调整大小我破坏jcrop和他的持有人，删除风格（对于css resize图像％），然后重新启动它！

Hope it's help someone with jcrop i using jcarousel and have a few images, and need to have jcrop to all of them so i just push all of inits in array,then in resizing i destroy jcrop and his holders, remove style(for css resize image by %) and then reinit it!

这篇关于使用jCrop响应设计/流体宽度CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！