我想在所有内容图像上应用CSS类(bootstrap).img响应
我正在借助引导程序来开发Wordpress主题, 因此我将案例应用于所有内容图像, 例如：
<
img src="http://www.srcmini.com/images/logo_03.png" class="img-responsive">
有没有办法自动应用相同的类属性？我不想为此查询。我确信引导程序可以解决我的问题, 所以请让我知道CSS的任何解决方案。
#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="http://www.srcmini.com/..." />
更新：与其他建议使用jQuery的答案不同, 此解决方案不需要任何脚本, 并且可以在旧的浏览器(例如IE)中使用。除此之外, 即使在运行jQuery代码之后, 它也可以用于插入文档中的任何< img> 标记。但是, 如果你决定使用Javascript, 我建议你使用document.querySelectAll(), 因为它不需要jQuery, 并且运行速度稍快。
#2应该足够容易地基于element属性添加类, 如下所示：
<
script type="text/javascript">
$(document).ready(function() {
$("img").addClass("img-responsive");
});
<
/script>
#3最好的方法是对CSS中的.img-response类使用bootstrap提供的声明。
例如, 你可以使用该类的内容设置网站的所有图像：
img {
display: block;
max-width: 100%;
height: auto;
}
就是这样。
你所有的图像都将具有.img-response类的内容, 而无需指定它。
#4如果你想添加img响应类以在WordPress中发布缩略图, 则可以这样添加
the_post_thumbnail('thumbnail', array('class' =>
'img-responsive'));
【我想在所有内容图像上应用CSS类(bootstrap).img响应】如果要在内容中添加到其他图像, 则可以使用jQuery向这些图像添加img响应类, 只需将其添加到你的javascript文件中
jQuery(document).ready(function( $ ) {/*add Class to Element*/
$('.wp-post-image').addClass('"img-responsive');
});
推荐阅读
- 我想说的是array(‘cat’=’Current category ID’)我该怎么做（）
- 我只想在WordPress的特定页面上添加自定义短代码
- 我已经在Boostrap中制作了一个轮播，并粘贴到了我的wordpress主题中，但幻灯片却叠了起来。我究竟做错了什么（）
- Visual Composer是否与divi兼容（ [关闭]）
- 这样使用”自定义字段”更改WooCommerce中的”添加到卡片文本”是否很好（）
- 类似这样的网站在wordpress上可以实现吗（）
- WordPress style.css模板元素的语法在任何地方都可用吗（）
- 使用 Nginx 提供 DDNS 服务（前篇）
- 定制个机器人帮你和Ta聊天