织梦dedecms如何让全浏览器支持图片不撑坏布局
本文主要介绍了织梦dedecms如何让全浏览支持图片不撑坏布局,不是通过修改CSS实现的,是使用JS实现的效果,这样的好处是兼容全浏览器不会出错,对织梦图片自适应有需要的朋友可以看看,值得参考借鉴的。
相信很多朋友都遇到过,发表一篇普通文章。如果图片宽度超过内容区域大小打乱页面布局。懂CSS的朋友可以通过CSS定义,当图片太大时,图片会自动缩小,但我试过,因为CSS对每个浏览器都有兼容性,所以我在IE6下测试,没有效果。
以前小编分享过dedecms图集图片超宽自适应的方法,下面再介绍一个DEDECMS图片适应方法,不需要修改源程序,只需要在模板中添加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会起作用,缩小图片。
以上就是关于织梦图片自适应的所有内容,希望可以帮到大家,欢迎扫码加微信一起交流~
TAG标签:织梦图片自适应
上一个:织梦dedecms如何让文章点击量实现随机数
下一个:织梦dedecms如何根据下级栏目获得顶级栏目名称