Html 我想在所有内容图像上应用css类（bootstrap）.img响应

我在bootstrap的帮助下开发Wordpress主题，因此我在所有内容图像上手动应用案例，如下所示：

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

---

有没有办法自动应用相同的类属性？我不想为此而提出质疑。我确信bootstrap有办法解决我的问题，所以让我知道CSS的任何解决方案。

应该很容易添加基于元素属性的类，请参见以下内容：

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

$（文档）.ready（函数（）{
$（“img”）.addClass（“img响应”）；
});

您可以直接在主题中使用较少的混音。 如果您希望所有图像都具有响应性，您可以说：

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

将在您的

主题.css

文件中为您提供：

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

但是，不建议这样做，因为它适用于所有

更新：

---

与其他建议使用jQuery的答案不同，该解决方案不需要任何脚本，并且可以在旧浏览器（如IE）中使用。此外，它还适用于插入文档的任何

标记，即使在运行jQuery代码之后也是如此。但是，如果您决定使用Javascript，我建议使用，因为它不需要jQuery，而且运行速度稍快。

如果您想添加

img responsive

类以在WordPress中发布缩略图，您可以这样添加

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

如果您想添加到内容中的另一个图像，可以使用jQuery将

img responsive

类添加到这些图像中，只需将其添加到javascript文件中即可

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

---

最好的方法是在CSS中使用bootstrap为类

.img responsive

提供的声明

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

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

就这样

---

您的所有图像都将包含类的内容

。img responsive

，无需指定它。

如果需要，您可以使用jQuery添加该类。可能重复如何创建主题。无文件如果您问这个问题，我假设您使用纯CSS创建主题。这很好，但正如你所看到的，它有自己的局限性。LESS是一种为CSS带来更多灵活性的语言。引导程序本身是用LESS编写的，然后编译成CSS。要了解LESS的语法，请看这里：您所要做的就是将当前CSS文件重命名为具有“.LESS”扩展名。然后@import“bootstrap”从本地目录（您下载了bootstrap）导入，然后使用较少的编译器生成CSS。好吧，听起来好像工作量太大了，但“少”的功能相当强大。

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

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


});

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