二种方法解决织梦DedeCMS文章图片太大撑破内容页

天外飘仙

第一个方法：通过css方法解决：

CSS样式如下：

1. img,a img{
   
2. border:0;
   
3. margin:0;
   
4. padding:0;
   
5. max-width:590px;
   
6. width:expression(this.width>590?”590px”:this.width);
   
7. max-height:590px;
   
8. height:expression(this.height>590?”590px”:this.height);
   
9. }

复制代码

上面的代码有2个问题！

1.会把图片变的非常小。要刷新一次才能正常显示！

2.图片不会按比例缩小，图片严重变形！

演示如下如下：

1. <!– Begin CSS 控制图片大小 –>
   
2. <style type=”text/css”>
   
3. <!–
   
4. img,a img{
   
5. border:0;
   
6. margin:0;
   
7. padding:0;
   
8. max-width:650px;
   
9. width: expression(this.width > 650 && this.width > this.height ? 650px : ‘auto';);
   
10. max-height:1650px;
    
11. height: expresion(this.height > 1650 ? 1650px : ‘auto';);
    
12. } –>
    
13. </style>
    
14. <!– End CSS 控制图片大小 –>

复制代码

第二种：通过JS来限制图片大小

在dede模板的内容页面底部</body>标签前面插入如下代码：

1. <script type=”text/javascript” >
   
2. //缩放图片到合适大小
   
3. function ResizeImages()
   
4. {
   
5. var myimg,oldwidth,oldheight;
   
6. var maxwidth=550;
   
7. var maxheight=880
   
8. var imgs = document.getElementById(‘article’).getElementsByTagName(‘img’); //如果你定义的id不是article，请修改此处
   
9. for(i=0;i<imgs.length;i++){
   
10. myimg = imgs;
    
11. if(myimg.width > myimg.height)
    
12. {
    
13. if(myimg.width > maxwidth)
    
14. {
    
15. oldwidth = myimg.width;
    
16. myimg.height = myimg.height * (maxwidth/oldwidth);
    
17. myimg.width = maxwidth;
    
18. }
    
19. }else{
    
20. if(myimg.height > maxheight)
    
21. {
    
22. oldheight = myimg.height;
    
23. myimg.width = myimg.width * (maxheight/oldheight);
    
24. myimg.height = maxheight;
    
25. }
    
26. }
    
27. }
    
28. }
    
29. //缩放图片到合适大小
    
30. ResizeImages();
    
31. </script>

复制代码

这样就可以了