掐趾神蒜 發表於 2023-10-16 00:00:00

WordPress去除img标签的高度与宽度让图片自适应屏幕

<p>
<span style='font-family: tahoma, arial, "Microsoft YaHei"; font-size: 14px;'>要求 </span><br style='font-family: tahoma, arial, "Microsoft YaHei"; font-size: 14px;'><br style='font-family: tahoma, arial, "Microsoft YaHei"; font-size: 14px;'><span style='font-family: tahoma, arial, "Microsoft YaHei"; font-size: 14px;'>如，在桌面设备上，图片使用的是以下的HTML代码： </span></p>
<div style='margin: 3px auto 0px; padding: 0px 3px; outline: none; line-height: 21.6px; clear: both; border-width: 1px; border-style: solid; border-color: rgb(0, 153, 204); background: rgb(246, 251, 255); overflow: hidden; font-family: tahoma, arial, "Microsoft YaHei";'>
<p style="margin: 0px; padding: 0px; outline: none; float: right; line-height: 25.2px; font-size: 14px;">
<span style="line-height: 25.2px; cursor: pointer;"><u>复制代码</u></span></p>
<p>
代码如下:</p>
</div>
<p style='margin: 0px auto 3px; padding: 0px 3px; outline: none; line-height: 25.2px; font-size: 14px; clear: both; border-right: 1px solid rgb(0, 153, 204); background: rgb(221, 237, 251); overflow: hidden; border-left: 1px solid rgb(0, 153, 204); word-break: break-all; border-bottom: 1px solid rgb(0, 153, 204); word-wrap: break-word; font-family: tahoma, arial, "Microsoft YaHei";'>
<br>
&lt;img src="abc.png" /&gt;
<span style='font-family: tahoma, arial, "Microsoft YaHei"; font-size: 14px;'>在移动设备端，因为屏幕都比较小，如果要让图片自适应屏幕，我们应当把width和height属性去除，不然图片可能会比屏幕大： </span></p>
<div style='margin: 3px auto 0px; padding: 0px 3px; outline: none; line-height: 21.6px; clear: both; border-width: 1px; border-style: solid; border-color: rgb(0, 153, 204); background: rgb(246, 251, 255); overflow: hidden; font-family: tahoma, arial, "Microsoft YaHei";'>
<p style="margin: 0px; padding: 0px; outline: none; float: right; line-height: 25.2px; font-size: 14px;">
<span style="line-height: 25.2px; cursor: pointer;"><u>复制代码</u></span></p>
<p>
代码如下:</p>
</div>
<p style='margin: 0px auto 3px; padding: 0px 3px; outline: none; line-height: 25.2px; font-size: 14px; clear: both; border-right: 1px solid rgb(0, 153, 204); background: rgb(221, 237, 251); overflow: hidden; border-left: 1px solid rgb(0, 153, 204); word-break: break-all; border-bottom: 1px solid rgb(0, 153, 204); word-wrap: break-word; font-family: tahoma, arial, "Microsoft YaHei";'>
<br>
&lt;img src="abc.png" /&gt;
<span style='font-family: tahoma, arial, "Microsoft YaHei"; font-size: 14px;'>方法一， </span><br style='font-family: tahoma, arial, "Microsoft YaHei"; font-size: 14px;'><span style='font-family: tahoma, arial, "Microsoft YaHei"; font-size: 14px;'>将下面代码复制到当前主题的 functions.php 文件中： </span></p>
<div style='margin: 3px auto 0px; padding: 0px 3px; outline: none; line-height: 21.6px; clear: both; border-width: 1px; border-style: solid; border-color: rgb(0, 153, 204); background: rgb(246, 251, 255); overflow: hidden; font-family: tahoma, arial, "Microsoft YaHei";'>
<p style="margin: 0px; padding: 0px; outline: none; float: right; line-height: 25.2px; font-size: 14px;">
<span style="line-height: 25.2px; cursor: pointer;"><u>复制代码</u></span></p>
<p>
代码如下:</p>
</div>
<p style='margin: 0px auto 3px; padding: 0px 3px; outline: none; line-height: 25.2px; font-size: 14px; clear: both; border-right: 1px solid rgb(0, 153, 204); background: rgb(221, 237, 251); overflow: hidden; border-left: 1px solid rgb(0, 153, 204); word-break: break-all; border-bottom: 1px solid rgb(0, 153, 204); word-wrap: break-word; font-family: tahoma, arial, "Microsoft YaHei";'>
<br>
add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 ); <br>
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 ); <br>
function remove_width_attribute( $html ) { <br>
$html = preg_replace( '/(width|height)="\d*"\s/', "", $html ); <br>
return $html; <br>
} </p>
<p>
<br style='font-family: tahoma, arial, "Microsoft YaHei"; font-size: 14px;'><span style='font-family: tahoma, arial, "Microsoft YaHei"; font-size: 14px;'>方法二 </span></p>
<div style='margin: 3px auto 0px; padding: 0px 3px; outline: none; line-height: 21.6px; clear: both; border-width: 1px; border-style: solid; border-color: rgb(0, 153, 204); background: rgb(246, 251, 255); overflow: hidden; font-family: tahoma, arial, "Microsoft YaHei";'>
<p style="margin: 0px; padding: 0px; outline: none; float: right; line-height: 25.2px; font-size: 14px;">
<span style="line-height: 25.2px; cursor: pointer;"><u>复制代码</u></span></p>
<p>
代码如下:</p>
</div>
<p style='margin: 0px auto 3px; padding: 0px 3px; outline: none; line-height: 25.2px; font-size: 14px; clear: both; border-right: 1px solid rgb(0, 153, 204); background: rgb(221, 237, 251); overflow: hidden; border-left: 1px solid rgb(0, 153, 204); word-break: break-all; border-bottom: 1px solid rgb(0, 153, 204); word-wrap: break-word; font-family: tahoma, arial, "Microsoft YaHei";'>
<br>
// 自适应图片删除width和height，by Ludou <br>
function ludou_remove_width_height_attribute($content){ <br>
preg_match_all("/&lt;.*?src=[\'|\"](.*?(?:[\.gif|\.jpg|\.png\.bmp]))[\'|\"].*?[\/]?&gt;/", $content, $images); <br>
if(!empty($images)) { <br>
foreach($images as $index =&gt; $value){ <br>
$new_img = preg_replace('/(width|height)="\d*"\s/', "", $images[$index]); <br>
$content = str_replace($images[$index], $new_img, $content); <br>
} <br>
} <br>
return $content; <br>
} <br>
// 判断是否是移动设备浏览 <br>
if(wp_is_mobile()) { <br>
// 删除文章内容中img的width和height属性 <br>
add_filter('the_content', 'ludou_remove_width_height_attribute', 99); <br>
} </p>
<p>
<br style='font-family: tahoma, arial, "Microsoft YaHei"; font-size: 14px;'><span style='font-family: tahoma, arial, "Microsoft YaHei"; font-size: 14px;'>这样我再试一下是不是达到想要的结果了。</span></p>
頁: [1]
查看完整版本: WordPress去除img标签的高度与宽度让图片自适应屏幕