小技巧:让文章的大图片不破坏布局
小俊工作室 / 2016-02-05

解决页面出现图片过大、撑破表格或不显示超出部分图片的问题

相信很多朋友,都曾遇到过,发表一篇普通文章,如果图片宽度超过内容区域大小,图片就会把表格撑大,打乱面页的布局,懂CSS的朋友能会通过css来定义,让超出的部分隐藏起来,但这样,图片的美观性就很差,显示不出来超出的部分,论坛中还有一些朋友,用css方法,当图片过大后,将图片自动缩小,但是我试过,因为CSS对各个浏览器存在兼容问题,我在IE6下测试,一点作用也没有。下面给大家介绍一下我在DEDECMS里的方法(不用修改源程序,只需要在模板里使img加上JS控制代码,然后将原始图片等比例缩小)。

第一步:

在img加上便签,还要去掉height属性。

修改内容页模板的{dede:field.body /}
{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}

第二步:

将下面代码插入到<head></head>中,注意那个670的数值,这个值意思是当图片超过这个数值,自动将图片缩小,宽度缩小为670,高度自动按比例缩小,这样不会变型。

<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>

到这里,就完活了,如果你懂CSS最好找到对应的CSS,将它的宽设定好,然后定义一下,超出部分隐藏,因为有时候,文章在加载的过程中,显示的是你原始大小,加载完成后,JS才会起作用,将图片缩小。

转载请注明出处:小俊工作室


网站地图 英皇国际娱乐官网 京城现金网 金鼎娱乐重庆时时彩
太阳城电子游戏 申博代理网址 申博代理
申博太阳城在线娱乐 新加坡芽笼红灯区费用 天上人间娱乐登入 澳门网上赌场网址登入
腾达娱乐重庆时时彩 大红鹰游戏 汇金娱乐重庆时时彩 大红鹰娱乐
博狗bodog娱乐场 菲律宾娱乐沙龙场 沙龙国际娱乐平台 365体育备用网址
844TGP.COM 855TGP.COM 66sbsun.com ib48.com S618F.COM
86XTD.COM 761cw.com XSB898.COM 998PT.COM 38XTD.COM
78csb.com 487SUN.COM 77sbib.com S618H.COM XSB886.COM
886XTD.COM 688BBIN.COM 697XTD.COM 598sj.com 978DC.COM