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%"

score 3 · Accepted Answer · edited May 23 '17 at 11:54

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)

Marian Rick · Answer 2 · 2014-12-13T16:37:31.930

1

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.

edited Dec 13 '14 at 16:37

answered Dec 13 '14 at 00:01

Marian Rick

3,350
4
31
67

thank you for quick response, and yes i already figured it out hahaha i will mark your answer as answer – PamanBeruang Dec 13 '14 at 00:06
It's actually the answer below this, you don't need !important and it's max-width – Christina Dec 13 '14 at 06:38
Using just the width parameter would stretch the image across the screen. To keep it in proportion you must tell the height to auto adjust too..... As is below. Making this answer ineffective! – Showcase Imagery Dec 13 '14 at 15:15

score 0 · Answer 3 · answered May 12 '17 at 12:44

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

Making All image bootstrap responsive class automatically

3 Answers3