Question

我正在为Wordpress构建响应式主题，我遇到了响应式图像的问题。问题是我需要改变内容中图像的大小。我的逻辑确实说我应该使用过滤器，但我找不到一个专门定位图像。我的第一个想法是使用JS lib，但是这个特别想要获得大图像和小图像的名称，因为我的网站使用了一些自定义媒体尺寸，我没有找到正确获取名称的方法小图像。

另一种方法是使用css

img {
 max-width: 100%;
}

但我需要做的是从img标签中删除width和height属性。

所以基本上这两种方法都要求我浏览内容并解析出图像标签，然后用新生成的标签替换它们。

我在不同的插件源中进行了一些挖掘，发现他们过滤了the_content，只是使用正则表达式来查找img标签并用new替换它们。

所以我正在寻找一种解决方案，使这项工作成为正确的方式，因为我觉得通过整个内容来替换图像是不正确的。如果没有更好的方法，有人可以请帮助我的代码（特别是正则表达式）来解决我的小问题。基本上我需要搜索img标签并删除宽度和高度属性。

Answer 1

CSS将轻松覆盖内联img标记，只需使用

即可

#.. img{

height:auto;
width:100%;

}

Answer 2

只需将它粘贴在你的functions.php中就可以了（缩略图中没有宽度或高度或通过编辑器添加图像）

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );

function remove_thumbnail_dimensions( $html ) {
$html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
return $html;
}

响应式Wordpress主题图片修复

2 个答案: