The box-sizing style of Bootstrap 3 causes the image of the UEditor control to fail to scale properly,

The box-sizing style of Bootstrap 3 causes the image of the UEditor control to fail to scale properly,

The UEditor component is a set of open-source, WYSIWYG web text editors provided by Baidu. It is lightweight, customizable, and focuses on user experience. It is powerful Based on the MIT protocol. During recent usage, we found that the uploaded images (or inserted images in an existing table package) cannot be scaled normally. Select the image and click and drag the small tab on the image edge with the mouse, images can only be zoomed in or out. I tried many methods and couldn't solve it. I even checked the js source code and didn't find any exceptions.

Later, we accidentally discovered that Bootstrap was introduced on the page, and Bootstrap set the box-sizing style to border-box by default. For more information, see the Bootstrap release log: http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/

For the definition and usage of the box-sizing style, see here: http://www.w3school.com.cn/cssref/pr_box-sizing.asp

Influential css in Bootstrap:

*,*:before,*:after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

We only need to redefine css on the page to overwrite the above style in Bootstrap, for example:

.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;}

*. Edui-container is the css class used to reference the parent element of the UEditor component.

The above is a full description of the box-sizing style of Bootstrap 3 that causes the image of the UEditor control to be unable to scale normally. I hope it will be helpful to you, if you have any questions, please leave a message. The editor will reply to you in time!