html - 我想在所有内容图像上应用 css class(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>标签。

更专业的选择是让您的类(class)像这样:

//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 并且运行速度稍快。