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

我在使用响应宽度图像上的Jcrop时遇到了麻烦，无法显示网站的移动版本。使用带响应式设计的jCrop /流体宽度CSS

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

这是由于，我认为，从真实图像的大小，而不是调整大小的版本（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应用到上传图像，但只要我开始尝试管理显示的图像大小，裁剪后的图像就会倾斜。

我认为谷歌会在这方面抛出更多的结果，因为我认为这是一个普遍的问题 - 或者我可能太昏暗以至于看不到明显的问题。

我希望有人能帮忙。

来源

2013-12-17 user2246804

-1

我碰到了同样的问题，我通过向服务器发送currenct图像宽度（100％像素）和原始图像宽度来解决此问题。从那里你可以计算出你需要的一切。

来源

2014-05-14 13:19:06 Frankey

尝试添加以下到您的Jcrop电话：

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

来源

2014-06-02 08:56:31 Tomeh

您可以通过将下面的风格你的CSS解决这个问题：

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

来源

2014-09-19 09:30:30 SuN

<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调整大小的图像），然后重新启动它！

来源

2015-11-08 09:30:15 user3455726

请问您可以添加说明吗？ – zohar

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

回答

相关问题