1. David Wu首页
  2. WordPress
  3. WordPress安装教程

禁止WordPress图片自动添加width和height属性

默认情况下,WordPress会自动添加图片的width和height属性,有的时候在文章中会发生错位,经测试,如果禁止WordPress图片自动添加width和height属性能解决这种尴尬! 方法一 在后台WordPress主题编辑模板函数(functions.php)文件,在文件最后面添加如下代码: //移除img标签自动高度和宽度。 add_filter( 'post_thumbnail_html', &#39

默认情况下,WordPress会自动添加图片的width和height属性,有的时候在文章中会发生错位,经测试,如果禁止WordPress图片自动添加width和height属性能解决这种尴尬!

方法一

在后台WordPress主题编辑模板函数(functions.php)文件,在文件最后面添加如下代码:

//移除img标签自动高度和宽度。
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;
}

方法二

这种方法就是首先判断是否为移动设备,如果是移动设备就删除img标签的width和height属性,从而实现自适性的目的。

// 自适应图片删除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图片自动添加width和height属性的两种方法,有需要的可以参考!

方法三

通过 jQuery 删除widthheight属性

对于已经添加到文章的图像,必须手动删除widthheight属性,或者也可以使用一些jQuery代码来解决问题,以下代码添加到主题 js 文件中:

    /*直接删除图像上的大小属性*/
    jQuery(document).ready(function($) {
        $('img').removeAttr('width').removeAttr('height');
    });

使用 jQuery 代码删除图像大小属性更加方便,对于已经添加或者将来要添加的图片都适用。

使用 CSS 使图像大小属性失效

对于响应式图片或者延迟加载时的默认图片都是较好的解决方法,将以下代码添加到主题 CSS 样式文件中:

  img {
        width: initial !important;
        max-width: 100% !important;
    }

重要提示

以上的方法是需要在图片响应式做好的前提下,即我们在主题实际使用过程中对 img 设置 max-width: 100%; height: auto; 这两条属性,才可以保证成比例拉伸。

原创文章,作者:WP侦探,如若转载,请注明出处:https://www.davidwu.net/archives/4456

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

邮箱地址不会被公开。 必填项已用*标注