javascript和JQuery焦点图和代码特效大全
当前最流行的开源CMS网站系统大全
当前位置:首页 > 软件教程 > dedecms

织梦文章正文图片按比例缩放实现方法

来源:IT技术网编辑:李建新发布于:2017-04-18人围观

相信很多用织梦系统的人都会遇到因为图片过大,导致整个网页被挤破或者过大遮住本该显示的内容。今天就教大家如果解决这一问题。

    

本文主要用的是js控制图片按比例缩放原来,具体使用和效果请阅读《js控制图片按比例缩放,完美兼容ie6》这里不在讲述,直接讲如何运用到织梦系统中。

1、打开include\arc.archives.class.php,查找

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

在下面插入

1
2
3
$this->Fields['body'] =str_ireplace(array('onload=""','onload=\'\''),'',$this->Fields['body']);     
$this->Fields['body'] = preg_replace("@ [\s]{0,}onload[\s]{0,}=[\"'\s]{0,}[\s\S]{0,}[\"'\s] @isU"," ",$this->Fields['body']);     
$this->Fields['body'] = str_ireplace("<img " ,"<img onload=\";DrawImage(this,600,450);\" ",$this->Fields['body']);

2、在templets/default/article_article.htm模板头部中加入js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<script language="JavaScript"
<!-- 
//图片按比例缩放 
var flag=false
function DrawImage(ImgD,iwidth,iheight){ 
    //参数(图片,允许的宽度,允许的高度) 
    var image=new Image(); 
    image.src=ImgD.src; 
    if(image.width>0 && image.height>0){ 
    flag=true
    if(image.width/image.height>= iwidth/iheight){ 
        if(image.width>iwidth){  
        ImgD.width=iwidth; 
        ImgD.height=(image.height*iwidth)/image.width; 
        }else
        ImgD.width=image.width;  
        ImgD.height=image.height; 
        
        ImgD.alt=image.width+"×"+image.height; 
        
    else
        if(image.height>iheight){  
        ImgD.height=iheight; 
        ImgD.width=(image.width*iheight)/image.height;         
        }else
        ImgD.width=image.width;  
        ImgD.height=image.height; 
        
        ImgD.alt=image.width+"×"+image.height; 
        
    
}  
//--> 
</script>

到此代码修改完成。

3、特别注意的是,在发布图片的时候一定不要加图片的宽度和高度。不然会没有效果。

这样效果就出来了,如下图:

与相关的文章
有时间的话来看看IT界的突发事件