用Jcrop裁剪图片，如何让添加的图片自适应容器大小

<div class="img-container" id="img-container">
	                <img id="preview" src="img/nn.jpg">
	            </div>

var jcrop_api,
			boundx, 
			boundy;          
		 $('#preview').Jcrop({ 
	       	 minSize: [32, 32], // min crop size
		         aspectRatio : 1, // keep aspect ratio 1:1
		         bgFade: true, // use fade effect
		         bgOpacity: .3, // fade opacity
	            onSelect : updateInfo,  
	            onChange : updateInfo,  
	            onRelease: clearInfo            
	        },function(){               
		           var bounds = this.getBounds();//获取图片实际尺寸
		            boundx = bounds[0];
		            boundy = bounds[1];
		            jcrop_api = this;
		  });  
	    function checkForm() {
	        if (parseInt($('#w').val())) {
	        	return true;
	        	}else{
	    	    $('.error').html('请选择一个裁剪的区域！').show();
	    	    return false;
	        }
	    };	   

		function updateInfo(e) {
		    $('#x1').val(e.x);
		    $('#y1').val(e.y);
		    $('#x2').val(e.x2);
		    $('#y2').val(e.y2);
		    $('#w').val(e.w);
		    $('#h').val(e.h);
		};

		function clearInfo() {
		    $('#w').val('');
		    $('#h').val('');
		    $("#preview").attr("src",'');
		};

我添加的图片是这样子的


而且我是改了图片大小才添加进来的，如果不改的话，他就会溢出容器，怎么办呢？我是想让它自适应容器大小（容器宽600px，高400px；），且能上下左右居中，怎么做呢？

12 个解决方案

#1

设置图片的大小和容器的大小一致！！

#2

不行的，这样子的话图片会变形的，如果不引用Jcrop插件的话，添加图片是会自适应容器大小，但是引用了这个Jcrop后，就不行，所以我改了它的源代码。

#3

大神，怎么修改的源码贡献一下啊，现在遇到一样的问题，愁死了

#4

jcrop加上这个属性图片尺寸再大也不会溢出了

#5

请问哪位知道。如何通过FILE 文件域，点击后选择图片 来替换JCROP 的大图及预览的小图呢，大图可以换，但小图一换SRC 的话，会变型，尺寸会沿用初始的

#6

我也遇到了这个问题，郁闷。请问楼主是怎么修改源码的啊，请求贡献啊

#7

设置图片的宽和高为100%（图片和容器比例一样的话等比例放大，但因为图片放大，肯定会失真）

#8

引用 4 楼 u010394015 的回复:

jcrop加上这个属性图片尺寸再大也不会溢出了

引用 4 楼 u010394015 的回复:

jcrop加上这个属性图片尺寸再大也不会溢出了

引用 4 楼 u010394015 的回复:

jcrop加上这个属性图片尺寸再大也不会溢出了

流弊

#9

楼主楼主   特别想知道  你这个功能的实现  我实现这个功能的时候也遇到了这个问题  希望能帮助下 先谢谢咯

#10

引用 4 楼 u010394015 的回复:

jcrop加上这个属性图片尺寸再大也不会溢出了

#11

大图可以阻止溢出 小图怎么 让其放大啊

#12

楼主是傻x,发表了问题,解决了都不分享,说不定不是自己解决的,是否解决了不知道呢,别问了