DedeCMS内容页图片过大导致布局混乱的解决方案

在构建网站时，确保内容页面布局的整洁性和美观性至关重要。今天，我们将分享如何解决DedeCMS内容页中图片过大导致布局混乱的问题。通过一些简单的代码修改和脚本添加，可以有效避免此类问题的发生。
许多使用DedeCMS的朋友可能都遇到过这样的情况：当我们在网站上发布一篇文章时，如果使用的图片宽度超过了内容区域的大小，就会导致页面布局变得混乱。虽然可以通过CSS隐藏超出部分，但这会影响图片的美观性。此外，利用CSS自动缩小图片的方法在某些浏览器（如IE6）中可能存在兼容性问题。
为了解决这一问题，我们可以通过修改程序文件，使图片能够自动按比例缩小。以下是具体的操作步骤：
**第一步**，找到并打开`include/arc.archives.class.php`文件，在其中找到如下代码：


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

在其下方插入以下代码：


//替换图片Alt为文档标题
$this->Fields['body'] = str_ireplace(array('alt=""','alt=\\'\\''),"",$this->Fields['body']);
$this->Fields['body'] = preg_replace("@ [\\s]{0,}alt[\\s]{0,}=[\\&'\\s]{0,}[\\s\\S]{0,}[\\&'\\s] @isU","",$this->Fields['body']);
$this->Fields['body'] = str_ireplace("Fields['body']);//img标签中加入超宽缩小JS调用代码
$suolue='onload="javascript:ImgReSize(this)"';
$this->Fields['body'] = str_ireplace("Fields['body']); //屏蔽height属性
$this->Fields['body'] = preg_replace('//i','',$this->Fields['body']);

**第二步**，打开前台文章页模板文件，默认路径为`/templets/default/article_article.htm`。在模板中插入以下JavaScript代码：


<script language='javascript'>
function ImgReSize(e) {
    if (e.width > 670) { 
        e.width = 670; 
        e.style.width = ""; 
    }
    if (e.height > 10) { 
        e.style.height = ""; 
    }
}
</script>

注意代码中的数值`670`，这个值表示当图片宽度超过670像素时，会自动将图片宽度调整为670像素，高度则按比例缩小，从而避免变形。
完成以上两步后，您的DedeCMS内容页图片过大导致的布局混乱问题就得到了解决。如果您熟悉CSS，还可以进一步优化内容区域的样式，例如设定固定宽度并隐藏超出部分。这样可以在页面加载过程中提升用户体验，因为有时图片在加载完成前可能会显示原始尺寸，而加载完成后才会通过JS调整大小。通过这些简单的修改，您可以确保网站内容页的布局更加整洁、美观，同时提高用户体验。

推荐阅读