萨龙网络
登录
首页-WordPress文章-WordPress,前端资讯-正文

删除或失效WordPress文章中的图像大小属性

萨龙龙萨龙龙
WordPress, 前端资讯
6年前
0
0
1.17W

默认情况下,WordPress会将图像元素widthheight属性添加到图像元素中。这些属性会影响CSS宽度和高度属性,图片延迟加载时默认图片的大小,可通过 PHP、JavaScript 和 CSS 来删除属性,或者使用其失效。

从媒体库插入的图像中删除图像大小属性

删除图像大小属性可完全控制 CSS 属性,可将以下代码添加到主题 functions.php 文件中:

/**
* 移除图片高度和宽度属性从文章内容中的图片上
*/
function salong_remove_image_size_attributes( $html ) {
return preg_replace( '/(width|height)="\d*"/', '', $html );
}
// 从特色图像中删除图片大小属性
add_filter( 'post_thumbnail_html', 'salong_remove_image_size_attributes' );
// 从添加到WordPress文章的图像中删除图像大小属性
add_filter( 'image_send_to_editor', 'salong_remove_image_size_attributes' );

请注意,当图像是特色图像或将媒体库有图像添加到文章时,此代码将从图像中去除图像大小属性,再添加图像到文章中。已上传到文章中的现有图像不受影响。

通过 jQuery 删除width和height属性

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

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

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

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

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

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

对于延迟加载时,默认图像与实际图像大小不一样时,默认图像将保持原有的大小。

英文原文:https://wpscholar.com/blog/remove-wp-image-size-attributes/

标签:
本文原创,作者:萨龙龙,其版权均为萨龙网络所有。
如需转载,请注明出处:https://salongweb.com/remove-wordpress-image-size-attributes.html
萨龙龙

萨龙龙

侠客
一个平平常常的人,热爱生活、旅行和摄影,骑行去过西藏,一直计划再去。14年从江西骑行来到大理,现栖居于洱海边,食人间烟火,过简单生活,做简约设计!
1342.28M456.88W4.19W
加载中…
分享:
WordPress 媒体库支持 SVG 图标的上传与预览
WordPress 媒体库支持 SVG 图标的上传与预览上一篇
WordPress 从不需要的页面禁用 WooCommerce 样式和脚本下一篇
WordPress 从不需要的页面禁用 WooCommerce 样式和脚本
相关文章
总数:109

WordPress 主题禁用古滕堡编辑器和小工具

WordPress4.9.8版本就发布了古滕堡编辑器,很好用,添加文章也比经典编辑器方便很多。在5.8版本后又在小工具中增加了古滕堡编辑…
萨龙龙萨龙龙
WordPress
4年前
0
0
1.53W
0

WordPress 主题 MNews Pro 5.2 投稿新增可插入音视频功能

MNewsPro主题已经更新到5.2版本,功能已经很完善,且实用,在文章投稿编辑器有用户提出不能上传视频或者插入视频简码不方便的问题。 …
萨龙龙萨龙龙
WordPress
3年前
0
0
2.57W
0

WordPress 从不需要的页面禁用 WooCommerce 样式和脚本

WooCommerce在每个页面上加载三个核心CSS样式表,并在WordPress站点上安装时发布。可以通过从不需要它的页面和内容中删除样式和…
萨龙龙萨龙龙
WooCommerce
6年前
0
0
1.77W
0

WordPress 主题 Slearn Pro 课程插件之编辑文章时创建和选择课时

在WordPress+Vue.js主题SlearnPro发布2.0重写版本后,用户反馈编辑课程选择课时时不够友好,课时很多时选择就相…
萨龙龙萨龙龙
WordPress
3年前
0
0
2.52W
0

WordPress 限制上传媒体的文件类型

MNews和LensNews主题都有前台投稿的功能,用户可以上传图片等文件,管理员是不希望用户上传任意的媒体文件,这时我们可以对用户上传的…
萨龙龙萨龙龙
WordPress
7年前
0
0
1.23W
0

WordPress 功能函数—— add_clean_index(向指定的表添加索引)

描述 向指定的表添加索引。 用法 add_clean_index(string$table,st…
萨龙龙萨龙龙
WordPress Functions
7年前
0
0
9.69K
0

WordPress 主题选项框架 Codestar Framework Pro 2.0专业版使用

萨龙网络在2018年9月份就写了一篇《WordPress简约实用的主题选项框架CodestarFramework》文章来介绍Codest…
萨龙龙萨龙龙
WordPress
7年前
0
0
2.97W
0

WordPress MU多站点网络域名绑定插件Domain Mapping的安装与使用

WordpressMU是多站点的程序,新创建的站点地址都是基于主域名下的二级域名,而强大的Wordpress可以为每个站点绑定不同的域名,这时…
萨龙龙萨龙龙
WordPress
10年前
0
0
2.24W
0

WordPress多站点社区动态中获取自定义文章类型更新

萨龙网络使用Buddypress社区已经很长一段时间,在社区首页动态中可能获取整个网站的最新文章、用户注册,用户动态内容,而自定义文章类型的发布…
萨龙龙萨龙龙
Buddypress, WordPress
9年前
0
0
1.20W
0

WordPress + 宝塔面板速度优化方案 Memcached + Redis

WordPress网站的速度应该上每个站长必须关注的一个问题,对于刚使用WordPress的朋友,优化网站速度是比较困难的事情,找不到好的…
萨龙龙萨龙龙
WordPress, 建站技术
5年前
0
0
2.33W
0

WordPress Mega超级大菜单插件Ubermenu

Ubermenu是一个用户友好的、可高度定制响应式的Wordpress超级大菜单插件,工作原理与Wordpress3菜单系统类似,强大到可创建…
萨龙龙萨龙龙
WordPress
10年前
0
0
1.71W
0

WordPress批量替换自定义域名称

WordPress自定义的强大不言而喻,很多主题都在使用,也为其创建了可视化的选项面板,用户使用都相当的直观、方便。萨龙网络新开发的LensNe…
萨龙龙萨龙龙
WordPress
9年前
0
0
9.45K
0
评论表单游客 您好,欢迎参与讨论。
加载中…
评论列表
总数:0
萨龙网络
没有相关内容