对齐Jcrop图像
Align Jcrop images
我有这样的代码:
<div class='mini'>
<div id='wrap_jcrop' class='td_wrap'>
<img id='img2crop' src=''>
</div>
</div>
有了这个CSS:
div.mini {
width: 300px;
height: 200px;
display: table;
}
div.td_wrap {
display: table-cell;
vertical-align: middle;
text-align: center;
}
img2crop的图像源是动态加载的,并使用Jcrop api进行处理。但Jcrop将图像对齐在左侧。
如何在div的中心对齐图像?
初始化jcrop:时,您可以向jcrop-holder元素添加一个类作为选项,而不是修改jcrop-css文件(根据插件作者的说法,不建议修改)
jQuery(function($) {
$('#jcrop_target').Jcrop({
addClass: 'jcrop-centered'
});
});
在HTML中的img
标签周围添加包装,例如
<div class="crop-image-wrapper">
<img id="jcrop_target" src="...." alt="" />
</div>
然后添加一个css样式,例如
.jcrop-centered
{
display: inline-block;
}
.crop-image-wrapper
{
text-align: center;
}
在Chrome中测试31.0.1650.63 m-如果它在其他浏览器中不起作用,请告诉我?(<IE8除外):-)
设置
.jcrop-holder
{
margin: 0 auto;
}
尝试margin:0 auto,位置:相对,浮动:左。
唯一对我有用的东西:
JS:
$("#img2crop").attr("src", resp).load(function(){
$("#wrap_jcrop").width(this.width);
$("#wrap_jcrop").height(this.height);
$("#wrap_jcrop").css("position", "absolute");
$("#wrap_jcrop").css("top", ($("#wrap_jcrop").parent().height() - $(this).height())/2 + "px");
$("#wrap_jcrop").css("left", ($("#wrap_jcrop").parent().width() - $(this).width())/2 + "px");
$('#img2crop').Jcrop();
});
CSS:
.mini {
position: relative;
}
相关文章:
- 如何使用url加载程序在webpack中导入多个图像
- JCROP更改图像时重置纵横比
- Jcrop未在加载的图像上初始化
- 如何使用jcrop裁剪不同大小的图像
- 缩小后的大图像上的Jcrop圆形选择显示预览选择区域中的全尺寸图像
- Jcrop:设置图像后,jcrop在应用新图像时不采用TrueSize
- 图像旋转和Jcrop.js
- JCrop 用户选择的图像
- 使用 jcrop 裁剪多个图像
- 对齐Jcrop图像
- 我应该如何使用jcrop在客户端裁剪图像并上传
- 使用ajax查询设置和更改Jcrop图像
- 大尺寸图像在jcrop中无法正确滚动
- Jquery JCrop对流体图像的功能
- 缩放大图像与JCrop
- 使用jcrop裁剪带有预览的图像
- 使用Jcrop和文件输入在上传前裁剪图像
- 让 JCrop 支持图像缩放的解决方案
- jCrop(jQuery)有时无法加载图像/裁剪器区域
- Jcrop和IE9图像文件未定义