Images can be automatically reduced in chrome and safari, but cannot be automatically reduced in firefox and IE9_html/css_WEB-ITnose

Because it needs to be accessible on mobile phones, the browser window was minimized during the test;
In Safari, it looks like this:



In Firefox, it looks like:


Neither the pictures nor the text are fully displayed;

The html and css are as follows:

<img class="img-responsive" width="250" src="img/sdlc.jpg" style="float:right;">

img-respinsive style:

display:block;max-width:100%;height:auto

How to solve it?

Reply to the discussion (solution)

Try adjusting the width of the parent container

Try adjusting the width of the parent container

Its width seems to be obtained automatically, it is useless to adjust it

Or try html5, use different styles according to the browser width; however The browser is required to support Html5;
is similar to the responsive layout below;

<style type="text/css">    content div {        border: 1px black solid;    }    @media screen and (max-width: 320px) {        #below320 {            background-color: red;        }    }    @media screen and (min-width: 320px) and (max-width: 800px) {        #between320to800 {            background-color: red;        }    }    @media screen and (min-width: 800px) and (max-width: 1280px) {        #between800to1280 {            background-color: red;        }    }    @media screen and (min-width: 1280px) {        #pass1280 {            background-color: red;        }    }</style>

Change max-width:100% to width: 100%

These browsers will not work on mobile phones

Just remove the width

Change max-width:100% to width: 100%

Well, I tried this, but it didn’t work;

These browsers can’t be used on mobile phones

We need to take this aspect into consideration, no, today for testing, we specially Download Firefox on your phone;

Just remove the width.

If you remove the width, the image will be displayed at its original size and will not be reduced;

Or try html5, using different styles according to different browser widths; however, the browser must support Html5;
is similar to the responsive layout below;

<style type="text/css">    content div {        border: 1px black solid;    }    @media screen and (max-width: 320px) {        #below320 {            background-color: red;        }    }    @media screen and (min-width: 320px) and (max-width: 800px) {        #between320to800 {            background-color: red;        }    }    @media screen and (min-width: 800px) and (max-width: 1280px) {        #between800to1280 {            background-color: red;        }    }    @media screen and (min-width: 1280px) {        #pass1280 {            background-color: red;        }    }</style>

I am not Specializing in front-end, I don’t quite understand what you said. I’ll try again. If it doesn’t work, I’ll change the layout and method;

Change max-width:100% Change it to width: 100%

Well, I tried this, but it doesn’t work;

Have you removed width="250"?

Have you removed width="250"?

It won’t work if you remove it; I tried everything involving width, whether absolute or relative, but it doesn’t work;
Could it be related to bootstrap, but in a different way;

This should be It is possible.

If it doesn’t work, it may be due to other influences.

Then I need to see more code.

This should be possible.

If it doesn’t work, it may be due to other influences.

Then I need to see more code.

But there is no problem in chrome, safari, opera and domestic browsers, but there is a problem in firefox and IE;