站长基地

 找回密码
 注册

QQ登录

只需一步,快速开始

站长专栏隆重上线,欢迎广大站长开通! 站长基地官方QQ群:40772293,欢迎加入 申请版主 - 给官方提建议 - 如何赚取积分?

丰富的资源下载 - 详尽全面的教程剖析 为站长提供持续动力  海量建站素材下载 源码 - 实用工具 - 书籍 - 图标 -

站长分类目录,收录优秀网站 - 火爆的友链交换平台 超级SEO,外链刷刷刷 - DEDECMS模板站 -(视频)10天轻松学会SEO-名站导航

搜索
返回列表
查看: 457|回复: 0

解决DEDE防止图片撑破页面,文章内容中的图片自适应宽度

[复制链接]
发表于 2015-5-16 12:02:40 | 显示全部楼层 |阅读模式
监控宝
DEDECMS教程
版本类型: DEDECMS 5.7 DEDECMS 5.5 DEDECMS 5.3 
类型: 美化教程 功能优化 
有两种方法完美解决dede内容页面图片过宽撑破表格的现象

方法一:

防止图片撑破页面,文章内容中的图片自适应css代码 以下css代码插入templets/style/page.css里面,680改成你们要控制的最大宽度。 这样当文章中图片宽度超过680后,自动按比例缩小成680,而对于那些宽度没有超过680的,保持原来的尺寸不变。 .viewbox img{ max- 防止图片撑破页面,文章内容中的图片自适应css代码 以下css代码插入templets/style/page.css里面,680改成你们要控制的最大宽度。 这样当文章中图片宽度超过680后,自动按比例缩小成680,而对于那些宽度没有超过680的,保持原来的尺寸不变。 .viewbox img{ max-height:50 防止图片撑破页面,文章内容中的图片自适应css代码
以下css代码插入templets/style/page.css里面,680改成你们要控制的最大宽度。
这样当文章中图片宽度超过680后,自动按比例缩小成680,而对于那些宽度没有超过680的,保持原来的尺寸不变。

  1. .viewbox img{
  2.     max-height:500px;
  3.     max-width:680px;
  4.     width:expression((this.width > 680 && this.width > this.height) ? '680px': this.width+'px');
  5.     height:expression((this.height > 500 && this.height > this.width) ? '500px': this.height+'px');
  6.     float:middle;
  7. }
复制代码
当然以上代码页可以写在content里。
方法二:

许多使用过DEDE建网站的朋友,可能都会碰到过这样的情况,当我们在一个网站里发表一篇文章时,如果我们使用的图片,其宽度超过内容区域大小,图片就会将表格撑大,同时使得页面布局变得混乱起来。当然,如果懂CSS,我们可以利用css来定义,让超出的部分隐藏起来。不过,这样做的话,图片的美观性就很差,显示不出来超出的部分。

解决这个问题,还有一些朋友,会利用css,使图片在过大后,自动将图片缩小,不过,值得注意的是,由于CSS对各个浏览器存在兼容问题,所以就拿IE6浏览器来说,其作用就不大。

今天,软件直销网小编为大家介绍一个好用的方法,供大家参考使用:
第一步,打开include/arc.archives.class.php

找到:
  1. //设置全局环境变量
  2. $this->Fields['typename'] = $this->TypeLink->TypeInfos['typename'];
  3. @SetSysEnv($this->Fields['typeid'],$this->Fields['typename'],$this->Fields['id'],$this->Fields['title'],'archives');
复制代码


在下面加入代码:

  1. //替换图片Alt为文档标题

  2. $this->Fields['body'] = str_ireplace(array('alt=""','alt=\'\''),'',$this->Fields['body']);
  3. $this->Fields['body'] = preg_replace("@ [\s]{0,}alt[\s]{0,}=[\"'\s]{0,}[\s\S]{0,}[\"'\s]
  4. @isU"," ",$this->Fields['body']);
  5. $this->Fields['body'] = str_ireplace("<img " ,"<img alt=\"".$this->Fields['title']."\"
  6. ",$this->Fields['body']);

  7. //img标签中加入超宽缩小JS调用代码

  8. $suolue='onload="javascript:ImgReSize(this)"';
  9. $this->Fields['body'] = str_ireplace("<img " ,"<img ".$suolue." ",$this->Fields['body']);
  10. //屏蔽height属性
  11. $this->Fields['body'] = preg_replace('/<img(.+?)height=(.+?) (.+?)>/i',"<img$1$3>",$this->Fields['body']);
复制代码


第二步:打开你前台文章页模版 默认的是:/templets/default/article_article.htm (有的朋友,仿完站,内容页的模版未必是这个默认的)打开模版后将下面代码插入到 中 ,注意那个670的数值,这个值意思是当图片超过这个数值,自动将图片缩小,宽度缩小为670,高度自动按比例缩小,这样不会变型。

  1. <script language='javascript'>
  2. function ImgReSize(e)
  3. {
  4. if(e.width>670) // 670可根据你文章的内容区域大小,可调整
  5. {
  6. e.width=670; // 等同上面你设的那个数值
  7. e.style.width="";
  8. }
  9. if(e.height>10)
  10. {
  11. e.style.height="";
  12. }
  13. }
  14. </script>
复制代码
到这里,就完活了,如果你懂CSS最好找到 内容区域的CSS,将它的宽设定好,然后定义一下,超出部分隐藏,因为有时候,文章在加载的过程中,显示的是你原始大小,加载完成后,JS才会起作用,将图片缩小。





您需要登录后才可以回帖 登录 | 注册

本版积分规则

二维码

小黑屋|手机版|Archiver|站长基地    

GMT+8, 2017-1-22 11:42 , Processed in 0.110550 second(s), 30 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表