我想对所有内容图像应用css类（bootstrap）.img-responsive [英] I want to apply css class(bootstrap) .img-responsive on all content images

问题描述

  
 >< img src =images / logo_03.pngclass =img-responsive> 
  

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

LESS直接混入主题中。
如果您希望所有图片都能够响应，您可以说：

  //在您的theme.less文件中
 img {
 .img-responsive（）; 
} 
  

会在 theme.css file：

  img {
 //所有Bootrap CSS属性让图片响应
 //包括周围媒体查询
} 
  

然而，这并不推荐，因为它适用于所有< img> 标签。

更专业的选择是让您的课程如下所示：

  //在您的theme.less文件中
 .theme-img {
 .img-responsive（ ）; 
 //附加主题特定样式
边框：1px纯蓝色; 
} 
  

并将其应用于您的图片：

 < img class =theme-imgsrc =.../> 
  

更新：
与其他建议使用jQuery的答案不同，此解决方案不需要任何脚本，它在旧的浏览器（例如IE）中工作。除此之外，它还可以用于运行jQuery代码之后插入到文档中的< img> 标签。但是，如果您决定使用Javascript，我建议使用 document.querySelectAll（） ，因为它不需要jQuery，运行速度稍快。

I am developing a Wordpress theme with the help of bootstrap so I am manually applying cases on all content images like this:

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

Is there any way to apply the same class properties automatically? I don't want to query for this purpose. I am sure bootstrap has a way to solve my problem, so let me know any solution with CSS.

解决方案

You can use the LESS mixins directly in your theme. If you want all images to be responsive you can say:

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

Will give you this in your theme.css file:

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

However, this is not recommended because it applies to all <img> tags.

A more professional option would be to make your class like:

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

and apply it to your images:

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

Update: unlike the other answers that suggest using jQuery, this solution doesn't need any scripting and it works in old browsers (eg. IE). Besides it will work for any <img> tag that is inserted into the document even after the jQuery code is run. If you decide to go with Javascript, however, I recommend using document.querySelectAll() because it doesn't need jQuery and runs slightly faster.

这篇关于我想对所有内容图像应用css类（bootstrap）.img-responsive的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！