Question

我正在使用bootstrap开发一个Wordpress主题，所以我手动应用所有内容图像的案例如下：

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

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

Answer 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）。此外，它适用于插入到文档中的任何<img>标记，即使在运行jQuery代码之后也是如此。但是，如果您决定使用Javascript，我建议使用document.querySelectAll()，因为它不需要jQuery并且运行速度稍快。

Answer 2

应该很容易根据element属性添加类，见下文：

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

Answer 3

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

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

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

就是这样。

所有图片都将包含班级.img-responsive的内容，而无需指定。

Answer 4

如果要添加img-responsive类以在WordPress中发布缩略图图像，可以像这样添加

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

如果要添加到内容中的其他图像，可以使用jQuery将img-responsive类添加到这些图像，只需将其添加到您的javascript文件

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

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


});

我想对所有内容图像应用css类（bootstrap）.img-responsive

4 个答案: