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

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