# 移除WordPress上传图片的宽度和高度参数

- Link: https://yjyj.net/learn/wordpress-learn/4336.html
- Published: 2013-12-27T14:25:12+08:00
- Author: 小 虾

⚡ 生猛大蝦编辑部 · 30 秒核心看点

 * 在 functions.php 里加过滤器，就能自动去掉图片宽高属性。
 * 适合统一前端样式、避免图片标签被固定尺寸限制。
 * 代码简单但要注意正则只处理 HTML 输出，不影响原图文件。

我们都知道在wordpress后台上传的图片添加到日志内会附带宽高属性。虽然在 HTML 代码中
直接为图片 img 标签书写宽高属性会为提高页面加载速度，但有时我们出于种种目的仍是需要
去掉 WordPress 后台上传的的图片的宽高参数。那么我们该怎么做呢？

仍是需要在万能的 functions.php 上做文章，在其中加入下面的代码即可。

    ```decode:true
    // Remove IMG Width Height
    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;
    }
    ```

这样我们就无需手动删除图片上的宽高属性，直接动态的将图片的宽度高度参数抹去了！

 

给力代码来自:http://www.wondercss.com/2013/wordpress/1544/

感谢原作者分享.

📌 生猛大蝦编辑部 · 背景与实操延伸

这篇文章虽然短，但解决的是 WordPress 里很常见的“图片标签太死板”问题。后台插图默认
带宽高属性，优点是能减少页面布局抖动；但在做响应式页面、统一图片比例或依赖 CSS 控制
尺寸时，固定属性反而会添乱。实操时要注意：这段代码只改输出 HTML，不会改媒体库里的
原图；如果主题还有其他图片输出入口，可能需要同步检查，避免出现一处生效、另一处仍
保留宽高的情况。

❓ 延伸问答与排错指南（FAQ）

WordPress上传图片后为什么会自动带宽高参数？

这是 WordPress 在插入图片到文章或特色图时，默认输出的 HTML 属性，用来帮助浏览器预
留布局空间。若你需要更灵活的响应式排版或统一样式，可以通过过滤输出内容来移除这些
属性。

去掉图片宽高属性会影响图片显示吗？

不会影响图片文件本身，只是移除了 HTML 标签里的 width 和 height。实际显示效果取决
于你的主题 CSS 和容器布局；如果没有配套样式，图片可能会按原始尺寸或受外层样式影响。

这段代码应该加到哪里最合适？

通常加到主题的 functions.php 中即可生效。建议先备份文件，再在测试环境验证，避免正则
替换影响其他图片输出。若主题更新频繁，也可以考虑放到子主题中维护。

📚 【[WordPress 学习](https://yjyj.net/category/learn/wordpress-learn)】专栏延伸
阅读与热门精选（[全站文章归档](https://yjyj.net/archive)）：

 * [添加一个自定义消息到后台编辑文章页面](https://yjyj.net/learn/wordpress-learn/4332.html)
 * [WordPress升级时提示Operation timed out after 300 seconds的问题](https://yjyj.net/learn/wordpress-learn/4314.html)
 * [更改WordPress网站的作者链接地址](https://yjyj.net/learn/wordpress-learn/4338.html)
 * [WordPress 的日志循环结构 Loop](https://yjyj.net/learn/wordpress-learn/4340.html)
 * 热门必读[程序员漫游指南](https://yjyj.net/what/5830.html)
 * 热门必读[升级一下iptables](https://yjyj.net/learn/centos/3208.html)

## Comments

### By: 啊啊

- Link: https://yjyj.net/learn/wordpress-learn/4336.html/comment-page-1#comment-15752
- Published: 2016-01-29T09:52:57+08:00

没用啊