我想在所有内容图像上应用CSS类(bootstrap).img响应

我正在借助引导程序来开发Wordpress主题, 因此我将案例应用于所有内容图像, 例如：

<img src="images/logo_03.png" class="img-responsive">

有没有办法自动应用相同的类属性？我不想为此查询。我确信引导程序可以解决我的问题, 所以请让我知道CSS的任何解决方案。

#1

你可以在主题中直接使用LESS mixins。如果你希望所有图像都响应, 则可以说：

//in your theme.less file
img {
  .img-responsive();
}

将在你的theme.css文件中为你提供：

img {
  //all Bootrap CSS properties that make your image responsive
  //including surrounding media queries
}

但是, 不建议这样做, 因为它适用于所有<img>标签。

一个更专业的选择是使你的班级类似于：

//in your theme.less file
.theme-img {
  .img-responsive();
  //additional theme-specific styling
  border: 1px solid blue;
}

并将其应用于你的图像：

<img class="theme-img" src="..." />

更新：与其他建议使用jQuery的答案不同, 此解决方案不需要任何脚本, 并且可以在旧的浏览器(例如IE)中使用。除此之外, 即使在运行jQuery代码之后, 它也可以用于插入文档中的任何<img>标记。但是, 如果你决定使用Javascript, 我建议你使用document.querySelectAll(), 因为它不需要jQuery, 并且运行速度稍快。

#2

应该足够容易地基于element属性添加类, 如下所示：

<script type="text/javascript">
    $(document).ready(function() {
        $("img").addClass("img-responsive");
});
</script>

#3

最好的方法是对CSS中的.img-response类使用bootstrap提供的声明。

例如, 你可以使用该类的内容设置网站的所有图像：

img {
display: block;
max-width: 100%;
height: auto;}

就是这样。

你所有的图像都将具有.img-response类的内容, 而无需指定它。

#4

如果你想添加img响应类以在WordPress中发布缩略图, 则可以这样添加

the_post_thumbnail('thumbnail', array('class' => 'img-responsive'));

如果要在内容中添加到其他图像, 则可以使用jQuery向这些图像添加img响应类, 只需将其添加到你的javascript文件中

jQuery(document).ready(function( $ ) {

/*add Class to Element*/
 $('.wp-post-image').addClass('"img-responsive');


});