如何使用Bootstrap使WordPress主题中的图像响应()

我已经有一个wordpress网站, 其中包含许多图片。我正在使用Bootstrap创建一个新主题, 但是图像似乎越过了容器区域。
Bootstrap提供了一个内置类:

class="img-responsive"

但是此代码需要插入所有< img> 标记中, 这需要大量工作。使图像具有响应性的其他方法是什么?
另外, 此代码不起作用-
img { border: 0 none; max-width: 100%; vertical-align: middle; }

它只是向内挤压图像。
#1https://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 );

【如何使用Bootstrap使WordPress主题中的图像响应()】如果使用的是股票主题, 则应考虑创建子主题以进行此修改。

    推荐阅读