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

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

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

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

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

真的是烦啊，因为不是第一次用这个插件，所以开始还以为是百度自己升级版本导致的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;}

加上之后，问题得到解决，亲测可行！！！

ueditor富文本编辑器bootstrap

看完文章，有任何疑问，请加入群聊一起交流！！！

扫码关注本站微信公众号，第一时间获取网站更新动态！

本文地址：https://www.jiweichengzhu.com/article/cafb0cd946b44a2fae9419fe4604ee10

关于转载：若站内作品和文章得到了你的青睐，欢迎各位朋友分享到个人站长或者朋友圈，但转载请注明文章出处和原文链接！

很赞哦！ ()