自动使所有图像引导响应类

Question

是否有必要使html页面中的所有图像都具有响应性，而无需键入class =“ img-sensitive”和width =“ 100％”？ 因为我使用的是tinymce html编辑器，当我将图像放入其中时，图像没有响应，并且当我使用智能手机浏览我的网站时，它看起来已损坏，因此默认情况下也许可以通过某种方法使所有响应成为响应？

也许有一些JavaScript可以做到这一点？ 检测页面中的所有img标签并添加

class =“ img响应” width =“ 100％”

Answer 1

好的，很抱歉，我错过了一些东西，这个问题已经在这里提出了，所以我只添加了指向答案的链接。默认情况下，Twitter Bootstrap 3中没有响应的图像？

所以只需添加

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

只需在bootstrap.css的最底部添加此css行，或仅创建一个新的css文件并将其命名为mystyle并将其放在您的每个css链接之后即可（我这样做是为了保持原始的bootstrap.css文件干净）

Answer 2

您可以使用!important;覆盖另一个css属性!important; 作为您的CSS属性的补充。 因此，在不了解引导程序深度的情况下，您可以尝试在样式表中添加类似的内容

img {
    width: 100% !important;
    height: auto !important;
}

或将其插入您的head <style>和</style>之间。

希望这对您有所帮助。 如果您需要其他建议，请告诉我。

更新提供的另一个答案是干净的答案。 您应该将该回答标记为正确;）

最好的问候，玛丽安。

Answer 3

无需通过CSS处理此问题。 您可以在tinymce编辑器本身中添加图像时应用“ img响应式”类。

在tintmce编辑器属性中添加以下属性：

image_class_list: [
    {title: 'Responsive', value: 'img-responsive'},
    {title: 'None', value: ''}
],

参考和学分： http : //archive.tinymce.com/forum/viewtopic.php? pid= 114620#p114620