要求

如,在桌面设备上,图片使用的是以下的HTML代码:

 代码如下 复制代码

1  <img src="abc.png" alt="abc" width="580" height="267" />

在移动设备端,因为屏幕都比较小,如果要让图片自适应屏幕,我们应当把width和height属性去除,不然图片可能会比屏幕大:

 代码如下 复制代码

1  <img src="abc.png" alt="abc" />

方法一,

http://www.111cn.net/wy/wordpress/58923.htm
将下面代码复制到当前主题的 functions.php 文件中:

 代码如下 复制代码

add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );

function remove_width_attribute( $html ) {
   $html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
   return $html;
}

方法二

 代码如下 复制代码

// 自适应图片删除width和height,by Ludou
    function ludou_remove_width_height_attribute($content){
      preg_match_all("/<[img|IMG].*?src=[\'|\"](.*?(?:[\.gif|\.jpg|\.png\.bmp]))[\'|\"].*?[\/]?>/", $content, $images);
      if(!empty($images)) {
        foreach($images[0] as $index => $value){
          $new_img = preg_replace('/(width|height)="\d*"\s/', "", $images[0][$index]);
          $content = str_replace($images[0][$index], $new_img, $content);
        }
      }
      return $content;
    }
    // 判断是否是移动设备浏览
    if(wp_is_mobile()) {
       // 删除文章内容中img的width和height属性
       add_filter('the_content', 'ludou_remove_width_height_attribute', 99);
    }

这样我再试一下是不是达到想要的结果了。

WordPress 去除图片img标签的高度与宽度的更多相关文章

  1. input submit标签的高度和宽度与input text的差异

    <input type="text"> 时设置input的高度和border,最后元素的高度和宽度包含了border的值. <input type="s ...

  2. <iframe>标签自适应高度和宽度

    <iframe src="index.html" id="iframepage" frameborder="0" scrolling= ...

  3. iframe 标签自适应高度和宽度

    iframe 结构如下 <iframe src="index.html" id="frame" frameborder="0" scr ...

  4. WordPress调用特色图片地址源,去除特色图片img标签其他样式

    我们在制作WordPress主题时候想要给wordpress特色图片,这也是为了更加的美观,但是我们直接使用wordpress特色图片引用代码的时候却发现,出现下面的情况. wordpress特色图片 ...

  5. 移除WordPress文章图片的宽度和高度属性

    通过WordPress自身的媒体上传功能插入到文章的图片,都会默认添加了高度和宽度属性: <img title="使用 Chrome Workspace 进行网站调试 | 倡萌的自留地 ...

  6. 在li元素中放入img图片时li的高度问题

    在li元素中放入img图片时li的高度会比img图片的高度多出几个像素,解决这个问题只需要将img元素的css设置成vertical-align: middle;就可以解决.

  7. 改善用户体验之wordpress添加图片弹出层效果 (插件 FancyBox)

    下面说说在改善用户体验之wordpress添加图片弹出层效果.效果图如下:   像这篇文章如何在百度搜索结果中显示网站站点logo? 文章内有添加图片,没加插件之前用户点击图片时,是直接_black打 ...

  8. 设置select标签的高度

    当无法给select标签设置高度的时候,给他加一个背景色,就可以设置了.

  9. Python图形编程探索系列-04-网上图片与标签组件的结合

    跳转到自己的博客 任务设定 任务:从网上找到一张图片,然后将其显示在标签上? 网上图片网站:http://pic.58pic.com/58pic/17/56/38/52w58PICtER_1024.j ...

随机推荐

  1. HDU 5601 N*M bulbs 找规律

    N*M bulbs 题目连接: http://codeforces.com/contest/510/problem/C Description NM个灯泡排成一片,也就是排成一个NM的矩形,有些开着, ...

  2. Docker:使用Ambassador进行跨主机间容器通信

    转载请注明出处:点我 由于Docker自身的网络的原因,想要在多主机间的容器之间进行通信是比较麻烦的事情.可以利用Ambassador容器来实现这一功能. 基本原理: 利用Ambassador来实现主 ...

  3. Android 数据库打包随APK发布

    有些时候我们的软件用到SQLite数据库,这个时候怎么把一个做好的数据库打包进我们的APK呢,其实很简单,就是把我们的数据库文件放到我们的手机里,所以不必局限在哪个地方写这个代码,在第一次创建数据库的 ...

  4. 初次接触CodeSmith

    说到开发效率的提高,代码生成器肯定是其中必不可少的重点.说到代码生成器,鼎鼎大名CodeSmith肯定是如雷贯耳. CodeSmith最大的特点是能够自定义模板(通俗的说就是想生成什么样就可以生成什么 ...

  5. 实现输出h264直播流的rtmp服务器 flash直播服务器【转】

    实现输出h264直播流的rtmp服务器 RTMP(Real Time Messaging Protocol)是常见的流媒体协议,用来传输音视频数据,结合flash,广泛用于直播.点播.聊天等应用,以及 ...

  6. 使用 Team Foundation 版本控制命令

    使用 Team Foundation 版本控制命令 Visual Studio 2013   其他版本 Visual Studio 2010 Visual Studio 2008 Visual Stu ...

  7. Linux用户空间与内核空间(理解高端内存)

    Linux 操作系统和驱动程序运行在内核空间,应用程序运行在用户空间,两者不能简单地使用指针传递数据,因为Linux使用的虚拟内存机制,用户空间的数据可能被换出,当内核空间使用用户空间指针时,对应的数 ...

  8. 100%会用到的angularjs的知识点【新手可mark】

    前言:下面我将整理出100%会到的angularjs的知识点,掌握这些知识点你基本上就可以独立完成一个angularjs的项目,前提是你有一定web开发的经验:1.了解基本的javascript的概念 ...

  9. How to solve the SVDI SN Number Display Problem

    Yesterday we have learn how to find the SVDI Serial Number, today one of customer from UK look our a ...

  10. Android(java)学习笔记65:线程的生命周期

    1. 我们学习线程本质就是学习如何开始线程和终止线程.下面这个关于线程的生命周期图,要牢记: 新建状态:当程序使用new关键字创建了一个线程之后,该线程就处于新建状态.此时和其他Java对象一样,它仅 ...