WordPress 自动去除img的width和height属性

日期: 标签:WordPress教程 32 条留言
如需帮忙改代码,或者WordPress二次开发、PHP网站建设等需求,可联系我购买付费服务:  点此联系我

年前折腾了一下博客的自适应功能,让使用手机、iPad等移动设备的访客也能顺畅的浏览露兜博客的内容。这里分享一下自适应主题需要用到的一个功能:当访客使用手机访问时,自动删除文章内容中图片的width和height属性,以达到自适应的效果。

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

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

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

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


为了达到此目的,在当前主题的functions.php中加入以下PHP代码即可:

// 自适应图片删除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);
}

可能有些人会问,干脆发文章时,img不加width和height,不是更方便?要回答这个问题,我们可以看看HTML img 标签的使用说明:HTML <img> 标签的 height 和 width 属性

在目前的情况下,露兜博客的访客绝大部分使用的还是桌面设备,如果为了自适应而牺牲了这部分访客的浏览体验,就有点得不偿失了。

PS:于江水同学介绍了一种不用删除width和height,而使用CSS来达到图片自适应的方法,用法更简单,更科学,欢迎测试:于江水同学的方法

-- 完 --

本文采用 「CC BY-NC-SA 4.0」创作共享协议,转载请标注以下信息:
原文出处:露兜博客 https://www.ludou.org/wordpress-remove-images-width-height-attribute.html
露兜
kaapass@outlook.com  QQ 825533758

业余编程爱好者,主业是淘宝店主,卖些工艺品,感兴趣可以到我的淘宝店看看(旺旺不提供技术咨询):西西弗sisyphe

32 条留言

点此留言
  1. lark

    你好,我是做设计的,也会些前端代码,最近才了解到wordpress,看到之前你博客里有“WordPress主题制作全过程”里提供的“tutsplus无偿提供的html模板Aurelius”,结果点的时候已经不能下了,原来你2010年就已经接触到wordpress了,果断大神级人物,我想学WordPress主题制作,能把“html模板Aurelius”文件共享一份给我么,谢谢大神

    • Ludou

      @lark https://www.ludou.org/create-wordpress-themes-html-template.html

  2. WordPress主题

    这个有用,记得,大发那儿还看到一个批量添加alt标签的函数呢。。

  3. 十年灯

    要照顾ipad什么的。。在css中给img定一个:img {max-width:100%}不就行了?这样定义后,img最大时都不会超过其父标签的宽度——当然要是你HTML元素超过了ipad的宽度,那这大img也会超过

    加了这句代码,对电脑屏幕访客毫无影响,而又兼顾移动平台,关键是:很简单

    • Ludou

      @十年灯 能用简单的方法解决问题那就最好,但是有时候,有些问题不能想得太简单。

      下面是一个自适应网页设计的经典范例,你可以在你的电脑上做个试验,将浏览器窗口最大化比较一下这两个页面的差别,然后将浏览器窗口缩小到iPad差不多的尺寸,再比较一下这两个页面的差别( 两个网页都用了:img {max-width:100%} ):
      http://jsbin.com/hehewova/1
      (六个人物头像img加了width和height,如<img src="f-holmes.jpg" alt="" width="260" height="272" />)

      http://jsbin.com/gerijasa/1
      (六个人物头像img没加width和height)

      你可能还会说,在css中给img定一个:img {max-width:100%;max-height:100%;}不就行了?好,看看范例:
      http://jsbin.com/hehewova/2
      (六个人物头像img加了width和height,同时定义了max-width和max-height都是100%)

      慢慢体会!

      • 十年灯

        @Ludou 这么一搞问题就不简单了,其实要兼顾这么多情况当然没那么简单,不然我岂不是要失业了.良好的解决办法总是要综合很多方面才能得到对吧

      • 帅气小琦琦

        @Ludou 我看了一下 确实存在这个问题 我在我的站点测试了一下 表示貌似主题已经考虑到这个问题 看来要学习的还有很多啊

    • lft59598

      @十年灯 你好,我也卡在自适应这里了,PC版的都搞定了,只是手机和平板一直解决不了,我想问的是,IPAD平板mini在竖屏的时候,应该设计最大的宽度是多少,

  4. 于江水

    这样做从前端的角度来说是不合理的。

    img 的 alt 属性是必须的,width 和 height 是推荐的。因为 img 在网页的加载是要比 div 这些结构慢的,所以往往是结构和文字先加载了,再加载的图片。这时候,由于浏览器预先不知道图片的尺寸大小,所以无法渲染图片在网页中的位置和尺寸。等图片加载进来之后,再进行渲染,这时候就产生重绘(就是浏览器重新计算相关元素的位置,具体表现就是图片出现了,图片下面的文字跑到下面了,淘宝的商品介绍页面,这里非常明显。)

    而带有 width 和 height 的 img,浏览器会计算出来,留空,然后等待图片加载,避免页面重绘,提高前端性能和用户体验,这里在知乎上多图的答案可以看出来。

    那么回到露兜大大在乎的响应式的图片处理。这里应该对 img 设置 max-width: 100%; height: auto; 这两条属性,才可以保证成比例拉伸。

    http://jsbin.com/hehewova/3 这是我对上面评论,第一个链接加上 height:auto; 的效果:D

  5. Kelvin

    我想给所有wordpress上传的图片class标签中都添加一个新的标签“.img-responsive”,这个应该怎么做?希望能指点下,谢谢

    • Ludou

      @Kelvin 第3段代码第6行改成:
      $new_img = str_replace('class="', 'class="img-responsive ', $images[0][$index]);

  6. xuexi

    $new_img = str_replace('class="', 'class="img-responsive ', $images[0][$index]);

    我也添加了一个class 自己还添加了一个data-src属性

    我想把高度 宽度不要去掉 怎么做哦?

  7. 般若沙迦

    我是外加元素来锁住图片尺寸的
    <i><img src="img/a3-1.png" alt=""></i>
    CSS定义I尺寸,然后img在CSS是width:100%
    这样在图片里面再加尺寸好像没作用了

  8. xuexi

    我不想删除width height 只要给img加个class 然后把路径给data-src=''

    上面怎么获取图片高度 宽度?

  9. 大肥羊

    我是发表文章的时候直接去除了,因为不去除的话那个lazyload的小图片会被放大,好难看的。

  10. 陌小雨

    这个有用!

  11. 痞子

    不知道tag标签的class能否去除或批量替换成其他的class值?

  12. 开开

    请问怎样将内容图片class里的 alignnone size-medium wp-image-96 这些删除呢?
    每个图片都有啊

  13. 高高

    请教一下啊,我现在想实现在评论中gif点击加载的效果,需要将gif图像的img标签中的src替换为data-gifffer,例如<img data-gifffer="01.gif" />,但是还要判断是gif图像,png和jpg不替换,如何做到呢?

    <code>
    add_action('comment_text', 'comments_img', 2);
    function comments_img($comment) {
    if 判断gif图像

    $comment = preg_replace('#(http://([^\s]*)\.(gif))#','<img src="$1" alt="" />',$comment);

    else
    $comment = preg_replace('#(http://([^\s]*)\.(jpg|png))#','<img data-gifffer="$1" alt="" />',$comment);
    end if;
    return $comment;
    }
    </code>

    • 露兜

      @高高 add_action('comment_text', 'comments_img', 2);

      function comments_img($comment) {

      preg_match_all("/<[img|IMG].*?src=[\'|\"](.*?(?:[\.gif|\.jpg|\.png\.bmp]))[\'|\"].*?[\/]?>/", $comment, $images);

      if(!empty($images)) {
      foreach($images[0] as $index => $value){
      if(strpos( $images[1][$index],'.gif') !== false) {
      $new_img = str_replace('<img ', '<img data-gifffer="'.$images[1][$index].'" ', $images[0][$index]);
      $comment = str_replace($images[0][$index], $new_img, $comment);
      }
      }
      }

      return $comment;
      }

  14. grace

    Hi, 弱弱地问一句,我想改img的宽度尺寸,请问下怎么弄,不好意思我刚接触wordpress。。。

  15. 刘荣焕

    新版本不能用了,求楼主更新

  16. 凯凯

    博主代码失效了呀

  17. 福利次元

    露兜,本文章内的代码已无效,请更新!

    • 露兜

      @福利次元 抱歉!
      查了一下,是代码高亮插件出了点问题,导致引号被转义导致代码没有生效。
      现在已经改过来了,可以使用。

发表留言