我想在所有内容图像上应用 css class(bootstrap) .img-responsive

Posted 2023-03-05

【中文标题】我想在所有内容图像上应用 css class(bootstrap) .img-responsive

【英文标题】：I want to apply css class(bootstrap) .img-responsive on all content images

【发布时间】：2015-01-12 19:17:07

【问题描述】：

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

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

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

【问题讨论】：

如果您愿意，可以使用 jQuery 添加类。

How to add automatic class in image for wordpress post 的可能重复项

【参考方案1】：

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

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

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

就是这样。

您的所有图像都将具有 .img-responsive 类的内容，无需指定。

【参考方案2】：

您可以直接在您的主题中使用 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，并且运行速度稍快。

【讨论】：

如何创建 theme.less 文件

如果你问这个问题，我假设你正在使用纯 CSS 来创建你的主题。这很好，但正如您所见，它有其自身的局限性。 LESS 是一种为 CSS 带来更多灵活性的语言。 Bootstrap 本身是用 LESS 编写的，然后编译为 CSS。要了解 LESS 的语法，请看这里：lesscss.org 您所要做的就是将当前的 CSS 文件重命名为“.less”扩展名。然后从本地目录（下载 Bootstrap 的地方）@import "bootstrap"，然后使用 LESS 编译器生成 CSS。好吧，听起来可能工作量太大，但 LESS 非常强大。

【参考方案3】：

如果您想添加 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');


);

【参考方案4】：

应该很容易添加基于元素属性的类，见下文：

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