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

U88_88 2015-01-20 10:05:10
<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;),且能上下左右居中,怎么做呢?
...全文
3333 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
奔跑的Abu 2017-10-11
  • 打赏
  • 举报
回复
楼主是傻x,发表了问题,解决了都不分享,说不定不是自己解决的,是否解决了不知道呢,别问了
qq_35829036 2017-01-25
  • 打赏
  • 举报
回复
大图可以阻止溢出 小图怎么 让其放大啊
lovejx 2016-09-14
  • 打赏
  • 举报
回复
引用 4 楼 u010394015 的回复:
jcrop加上这个属性图片尺寸再大也不会溢出了
自由的刺猬 2016-02-24
  • 打赏
  • 举报
回复
楼主楼主 特别想知道 你这个功能的实现 我实现这个功能的时候也遇到了这个问题 希望能帮助下 先谢谢咯
程序尤八哥 2015-07-01
  • 打赏
  • 举报
回复
引用 4 楼 u010394015 的回复:
jcrop加上这个属性图片尺寸再大也不会溢出了
引用 4 楼 u010394015 的回复:
jcrop加上这个属性图片尺寸再大也不会溢出了
引用 4 楼 u010394015 的回复:
jcrop加上这个属性图片尺寸再大也不会溢出了
流弊
Waitforsniping 2015-06-10
  • 打赏
  • 举报
回复
设置图片的宽和高为100%(图片和容器比例一样的话等比例放大,但因为图片放大,肯定会失真)
a11111111 2015-06-09
  • 打赏
  • 举报
回复
我也遇到了这个问题,郁闷。请问楼主是怎么修改源码的啊,请求贡献啊
nannanvip2012 2015-06-04
  • 打赏
  • 举报
回复
请问哪位知道。如何通过FILE 文件域,点击后选择图片 来替换JCROP 的大图及预览的小图呢,大图可以换,但小图一换SRC 的话,会变型,尺寸会沿用初始的
、不知不觉、 2015-06-02
  • 打赏
  • 举报
回复





jcrop加上这个属性图片尺寸再大也不会溢出了
ass834271075 2015-05-20
  • 打赏
  • 举报
回复
大神,怎么修改的源码贡献一下啊,现在遇到一样的问题,愁死了
U88_88 2015-01-22
  • 打赏
  • 举报
回复
不行的,这样子的话图片会变形的,如果不引用Jcrop插件的话,添加图片是会自适应容器大小,但是引用了这个Jcrop后,就不行,所以我改了它的源代码。
业余草 2015-01-20
  • 打赏
  • 举报
回复
设置图片的大小和容器的大小一致!!

61,112

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧