欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。QQ快速注册登录 网站托管 VIP 网站定制

361模板网

当前位置:361模板网 > 技术文档 > 网站技巧 > 织梦手机移动端内容页图片变形问题解决,织梦手机端自适应
这篇文章主要为大家详细介绍了织梦手机移动端内容页图片变形问题解决,织梦手机端自适应,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

今天一个用户咨询织梦手机移动端内容页图片变形问题解决怎么解决?如下图:

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

  在手机页面模板里添加图片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标签

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

{dede:field.body/}

修改为

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

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


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

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

以上就是织梦手机移动端内容页图片变形问题解决,织梦手机端自适应的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361模板网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签: 织梦移动端 图片变形

上一篇织梦dedecms当前位置导航如何去掉链接

下一篇织梦dedeCMS移动端图片拉伸变形解决方法

取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在