如何使用 Bootstrap 使 wordpress 主题中的图像响应？

Question

我已经有一个 wordpress 网站，帖子中有很多图片。我正在使用引导程序创建一个新主题，但似乎图像正在穿过容器区域。

Bootstrap 提供了一个内置类：

class="img-responsive"

但是这段代码需要插入到所有<img> 标签中，这需要大量的工作。 使图像具有响应性的其他方法是什么？

此外，此代码不起作用 -

img
{
     border: 0 none;
     max-width: 100%;
     vertical-align: middle;
}

它只是向内挤压图像。

Answer 1

https://gist.github.com/mkdizajn/7352469 有一个要点说明如何做到这一点

技术是将以下内容添加到您的functions.php（来自gist）：

function bootstrap_responsive_images( $html ){
    $classes = 'img-responsive'; // separated by spaces, e.g. 'img image-link'
    // check if there are already classes assigned to the anchor
    if ( preg_match('/<img.*? class="/', $html) ) {
        $html = preg_replace('/(<img.*? class=".*?)(".*?\/>)/', '$1 ' . $classes . ' $2', $html);
    } else {
        $html = preg_replace('/(<img.*?)(\/>)/', '$1 class="' . $classes . '" $2', $html);
    }
    // remove dimensions from images,, does not need it!
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}
add_filter( 'the_content','bootstrap_responsive_images',10 );
add_filter( 'post_thumbnail_html', 'bootstrap_responsive_images', 10 ); 

如果您使用的是股票主题，您应该考虑创建一个子主题来进行此修改。