织梦dedecms内容页插入大图片不撑开页面的方法

92建站   2021-08-16   收藏本文

相信很多朋友都遇到过,发表过一篇普通的文章。如果图片宽度超过内容区域大小,图片会扩大表格,打乱页面布局。懂CSS的朋友可以通过CSS定义,隐藏超出的部分,但是图片的美感很差。今天小编和大伙儿介绍个织梦dedecms内容页插入大图片不撑开页面的方法。

下面就来说说织梦内容页大图片不撑破页面的方法。

第一步:在img加上便签,还要去掉height属性。

修改内容页模板的{dede:field.body /}为

<span style="font-family:tahoma,geneva,sans-serif;"><span style="font-size:14px;">{dede:field.body runphp='yes'}

$content = @me;

$mode1 = "/<img/";

$mode2 = "/height=\"(\d+)\" /";

$str1 = "<img onload=\"javascript:ImgReSize(this)\"";

$content = preg_replace($mode1,$str1,$content);

$content = preg_replace($mode2,"",$content);

@me = $content;

{/dede:field.body}</span></span>

第二步:将下面代码插入到<head></head>中

注意那个670的数值,这个值意思是当图片超过这个数值,自动将图片缩小,宽度缩小为670,高度自动按比例缩小,这样不会变型。

<span style="font-family:tahoma,geneva,sans-serif;"><span style="font-size:14px;"><script language='javascript'>

function ImgReSize(e)

{

if(e.width>670) // 670可根据你文章的内容区域大小,可调整

{

e.width=670; // 等同上面你设的那个数值

e.style.width="";

}

if(e.height>10)

{

e.style.height="";

}

}

</script></span></span>

到这里,就可以了,直接放到模板里面使用吧。

展开