我已经有一个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主题中的图像响应()】如果使用的是股票主题, 则应考虑创建子主题以进行此修改。
推荐阅读
- 如何使用WordPress内联整个样式表的内容()
- 如何使用register_taxonomy_args WordPress过滤分类法args
- 如何从自定义帖子类型获取自定义类别slug和ID()
- 如何编辑dynamic_sidebar()的内容()
- 悬停时用颜色填充图像/按钮
- Firewalld
- Linux防火墙基础 —— iptables防火墙
- Shell编程之函数
- 正则表达式