仿站无忧网,专业从事仿站,网站定制,模板制作仿站无忧

仿站 网站定制
网站建设一条龙

织梦手机移动端内容页图片变形 如何自适应

在手机页面模板里添加图片style标签过滤,去除图片的长宽设置,这样在手机端图片就不会变形了,具体解决办法如下:

  在安装调试DEDECMS手机版网站的时候,发现一个问题,图片无法很好的适应屏幕,宽度可以与屏幕同宽,而高度却没有按比例调整,导致图片看起来像被挤扁了一样,为什么会这样呢?

  一般为了要达到图片自适应屏幕宽度的目的,我们在img标签的样式中定义max-width:100%;height:auto;就可以了,可是这次设置了也没有效果。

  通过查看源代码,发现文章中的图片img标签原有的style格式设定没有过滤,从而导致css文件中设置的img样式无效。如下图:

 

织梦移动端内容页图片变形问题解决,织梦手机端自适应?

 

  新版的移动端访问是从根目录的m文件夹底下的php文件访问,调用的模板文件是templets/default/目录底下以"_m.htm"结尾的模板文件。在这里我们需要修改article_article_m.htm。由于我这个网站还有一个image的图集模板,所以我还要需要修改article_image_m.htm,通过preg_replace函数过滤图片的style标签

  在需要修改的模板文件里,查找 

1
{dede:field.body/}

修改为

1
{dede:field.body function="preg_replace('/style=.+?[*|\"]/i','', @me)"/}

 修改完之后保存,再开启页面的时候,查看源代码,style标签的内容已经被过滤掉了,图片已经按比例缩小,不会出现比例失调的状况了。


织梦移动端内容页图片变形问题解决,织梦手机端自适应?

到这里 织梦手机移动端内容页图片变形问题就解决了。你学会了吗?

以上就是织梦手机移动端内容页图片变形问题解决,织梦手机端自适应的全部内容,希望对大家的学习和解决疑问有所帮助。
未经允许不得转载:仿站无忧 » 织梦手机移动端内容页图片变形 如何自适应
欢迎加入仿站无忧,资源分享,技术交流,网赚思路:仿站无忧