您当前的位置：首页 > 学无止境网站首页学无止境
关于百度编辑器UEditor中图片手机端自适应,手机端展示的图片超出屏幕的问题
发布时间：2019-08-16编辑：小猪查看次数：5636
百度编辑器中添加的图片在手机端不能自适应问题
做网站经常要用到百度编辑器，页面的渲染我们一般用{$content}来显示，这时候在手机端就会出现首先宽度过宽超过手机尺寸的问题，用max-width:100%;限制之后呢又会发现高度还是那么高，没有进行等比例缩放，找了下度娘下面列一下解决方法：
经过调试发现，<img>标签中的style就是影响移动端自适应的问题所在。将整个style删除后，既不会影响PC端图片大小，也会使自适应恢复。
百度编辑器呢会自动把添加的图片设置宽高属性，所以我们要把这两行代码干掉——找到js所在位置ueditor/ueditor/dialogs/image，找到image.js文件，打开编辑，第272行和279行分别设置了宽高属性，将其屏蔽即可style: "width:" + data['width'] + "px;height:" + data['height'] + "px;"
然后在页面稍加限制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css"> .test img{display:block;max-width:100%;height:auot;} </style>
</head>
<body>
<div class="test">{$content}</div>
<script>
</script>
</body>
</html>
关键字词：百度编辑器中添加的图片在手机端不能自适应问题
上一篇： 微信小程序-view实现单选、多选
下一篇： php处理复选框全选全不选批量删除功能