码迷,mamicode.com
首页 > Web开发 > 详细

百度副文本编辑器自动缩放上传的图片

时间:2017-09-17 00:34:24      阅读:237      评论:0      收藏:0      [点我收藏+]

标签:ant   内容   设置   处理   文本编辑器   src   图片缩放   pre   一个   

  在使用百度副文本编辑器的时候出现一个很苦恼的bug:

上图:

技术分享

就是图片太大,超出了评论框,这其中css和html写的不大合理有关外,还有副文本编辑器没有做处理:

处理方法:

1.来到副文本编辑器的themes文件夹内:

技术分享

2.修改iframe.css文件

技术分享

3.在该文件里面编辑以下代码:

img {
    max-width: 100%; /*图片自适应宽度*/
}
body {
    overflow-y: scroll !important;
}
.view {
    word-break: break-all;
}
.vote_area {
    display: block;
}
.vote_iframe {
    background-color: transparent;
    border: 0 none;
    height: 100%;
}
#edui1_imagescale{display:none !important;} /*去除点击图片后出现的拉伸边框*/

 技术分享

 

4.编辑器理想的结果

技术分享

 当然这只是编辑器的图片缩放功能设置好了,页面的css样式还没有改写好!!!

5,改写css样式!

技术分享

在显示界面的内容区的css加上这一个万金油代码:

原理:让内容区的小图大小不变,大图就随着内容盒子的大小改变

div.content img{
  max-width: 100%;      
}

最后的结果:

技术分享

 

百度副文本编辑器自动缩放上传的图片

标签:ant   内容   设置   处理   文本编辑器   src   图片缩放   pre   一个   

原文地址:http://www.cnblogs.com/mrszhou/p/7533235.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!