Css image max-width does not work with Firefox / IE

Question

Here's the JsFiddle .

HTML:

<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1">
<div data-role="page" >
    <div id="contentwrap">
        <div id="content" data-role="content">
             <img width="300" src="http://upload.wikimedia.org/wikipedia/commons/f/f1/Ski_trail_rating_symbol_red_circle.png" />

          asdad asd asd asd   sadadada ad sad asd asd asd asd sadasdaad adsa dasd sa
        </div>
    </div>
</div>

CSS:

html, body {
height: 100%;
}

#contentwrap {
display: table;
height: 100%;
max-width: 500px;
margin: 0 auto;
position: relative;
}

#contentwrap img {
margin-left: auto;
margin-right: auto;
display:block;
margin-bottom: 10px;

max-width:100%;
}

#content {
height: 100%;
display: table-cell;
text-align:center;
vertical-align:middle;
}

As you can see, if you test it, the attribute "max-width: 100%" only works in Google Chrome. With Firefox and IE, the image width remains unchanged ... With Chrome, the image adapts to the window ...:

How can i fix this? (at least with IE11)

I found other posts with the same problem, but no one gave a good solution ...

Answer 1

Here is one way to achieve your desired layout.

I left some jQuery Mobile classes and just used my own CSS / CSS3.

HTML:

<div id="contentwrap">
    <div id="content">
        <img width="300" src="http://upload.wikimedia.org/wikipedia/commons/f/f1/Ski_trail_rating_symbol_red_circle.png" />
        asdad asd asd asd sadadada ad sad asd asd asd asd sadasdaad adsa dasd sa
    </div>
</div>

CSS :

html, body {
    height: 100%;
}
#contentwrap {
    background-color: beige;
    margin: 0 auto;
    max-width: 500px;
    height: 100%;
    display: table;
}
#content {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
#content img {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 300px;
}

CSS #contentwrap #content CSS, .

300 , width img.

#content, , width: 100% , #content , max-width , 300px .

CSS jQuery Mobile, , , - , ( ).

. : http://jsfiddle.net/audetwebdesign/ZMLDD/

. max-width , width img.

Firefox, Chrome, IE Opera, .

Answer 2

- table-layout fixed , display: table.

#contentwrap {
    display: table;
    table-layout: fixed;
    height: 100%;
    max-width: 500px;
    margin: 0 auto;
    position: relative;
}

Answer 3

, max-width . 300px 100%, 100%

So use min-width: 300pxand instead max-width: 100%, which will make it work in all browsers

Answer 4

Responsive images for Firefox, IE, Chrome. A simple solution that works in Firefox

<div class="article"><img></div>

.article {background: transparent 0% 0% / 100% auto;}
.article img {max-width: 100%;}