Making All image bootstrap responsive class automatically

Question

is there anyway to make all image in html page to be responsive without need to type class="img-responsive" and width="100%" ? because i'm using tinymce html editor and when i put image into there, the image is not responsive and it's looks broken when i browse my site using smartphone, so maybe there is some way to make all to be responsive by default?

or maybe there is some javascript to do that? detect all img tag in page and add

class="img responsive" width="100%"

Answer 1

okay sorry that i miss something, this question is already been asked in here so i just put a link to the answer Images not responsive by default in Twitter Bootstrap 3?

so just add

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

just add this css line in the very bottom of your bootstrap.css or just make a new css file and named it mystyle and put it after every css link in your head (i do it like that so keep the original bootstrap.css file clean)

Answer 2

You can override another css attribute by using !important; as addition to your css attribute. So, without knowing the depth of bootstrap, you can try to add something like this to your stylesheet

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

Or insert this between <style> and </style> in your head -section.

Hope this helps as a quick tipp. If you need other suggestions please let me know.

UPDATE The other provided answere is the clean one. You should mark that answere as correct ;)

Best regards, Marian.

Answer 3

No need to handle this via css. You can apply "img-responsive" class at the time of adding the image in tinymce editor itself.

Add below property in your tintmce editor properties:

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

Reference and credits: http://archive.tinymce.com/forum/viewtopic.php?pid=114620#p114620