首页   >   代码编程

UEditor和Bootstrap冲突导致图片缩放失败

UEditor是百度的一款开源工具,称之为:所见即所得的富文本编辑器,有图片、文字、视频、代码块等等功能集成,可以满足大部分网站的需求。

之前一直用这个,并没有碰到什么问题,但是最近的项目中,前端框架在选型的时候是bootstrap,然后再引入Ueditor的时候,就出现了一个问题:图片缩放不受控制,具体现象表现为,我想放大图片,将鼠标按住往右拖动,图片反而还向左缩小了,然后我鼠标继续向左的时候,图片变得更小了。

没有截到动态图,用一些标注来给大家看一下问题所在:

UEditor和Bootstrap冲突导致图片缩放失败

右下角红色框框是我拖动鼠标最终的位置,按理说此时图片应该也被放大到这个位置才对(红色方框区域),但是我的图片却变得非常小了,比我上传的原图片都小了不少。。。

真的是烦啊,因为不是第一次用这个插件,所以开始还以为是百度自己升级版本导致的bug,但是跑到官网去在线体验了一下demo,没有问题,图片可以正常缩放,但是为什么我这里不行了呢?

遂百度之,开始一直没有怀疑到bootstrap头上,后来查阅资料时,发现竟然是bootstrap的全局样式box-sizing属性影响到了图片缩放,因为将所有的元素都设置为了box-sizing:border-box了

这原因还真是让我意想不到,既然问题找到了,那就来解决它,bootstrap转成border-box了,那我给他转回来就OK了

.edui-container *{-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;}
.edui-container *:before,.edui-container *:after {-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;}

加上之后,问题得到解决,亲测可行!!!

QQ群Ⅰ: 686430774 (已满)

QQ群Ⅱ: 718410762 (已满)

QQ群Ⅲ: 638620451 (已满)

QQ群Ⅳ: 474195684

如果文章有帮到你,可以考虑请博主喝杯咖啡!

分享到:

欢迎分享本文,转载请注明出处!

作者:不忘初心

发布时间:2019-03-08

永久地址:https://www.jiweichengzhu.com/article/cafb0cd946b44a2fae9419fe4604ee10

评论