要求

如,在桌面设备上,图片使用的是以下的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. Codeforces Good bye 2015 B. New Year and Old Property dfs 数位DP

    B. New Year and Old Property 题目连接: http://www.codeforces.com/contest/611/problem/B Description The y ...

  2. hdu 5276 YJC tricks time 数学

    YJC tricks time Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?p ...

  3. 深入NGINX:我们如何设计它的性能和扩展性

    为了更好地理解设计,你需要了解NGINX是如何工作的.NGINX之所以能在性能上如此优越,是由于其背后的设计.许多web服务器和应用服务器使用简单的线程的(threaded).或基于流程的 (proc ...

  4. 【JavaScript】关于prototype原型的一些链接

    http://www.cnblogs.com/slowsoul/archive/2013/05/30/3107198.html http://www.thinksaas.cn/group/topic/ ...

  5. Redis缓存服务搭建及实现数据读写

    发现博客园中好多大牛在介绍自己的开源项目是很少用到缓存,比如Memcached.Redis.mongodb等,今天得空抽时间把Redis缓存研究了一下,写下来总结一下,跟大家一起分享 一下.由于小弟水 ...

  6. [CoffeeScript] Level 4 Arrays, Objects, Iterations -- Ex

    Coffee on the Range Create an array with numbers 1 until 10 using the inclusive (two dot) range synt ...

  7. 对javascript this的理解

    对于this的理解,大部分时间都比较模糊,最近几天做了一些研究,记录一下 首先应该明白,this是执行上下文的一个属性,它的值取决于执行上下文,执行上下文和函数调用方式相关,定义一个function的 ...

  8. MapReduce原理及其主要实现平台分析

    原文:http://www.infotech.ac.cn/article/2012/1003-3513-28-2-60.html MapReduce原理及其主要实现平台分析 亢丽芸, 王效岳, 白如江 ...

  9. L - Abbott's Revenge(比较复杂的bfs)

    Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Submit Status Practice UV ...

  10. 1.7.4.2 Local Parameters in Queries--局部参数

    1. 局部参数 Local parameters是在solr请求中指定一个查询参数.Local parameters提供了一个方式以添加元数据到某个参数类型中,如查询字符串(在solr文档中,Loca ...