css image max-width not working with Firefox / IE

Question

Here's a 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 "max-width: 100%" attribute only works on Google Chrome. With Firefox and IE, the image width stay the same... With Chrome, the image adapt to the window... :

How can I fix it ? (at least with IE11)

I found other posts with the same problem but none gave a good solution...

Solution 1

Here is one way of achieving the desired layout.

I left out some of the jQuery Mobile classes and just used native CSS/CSS3.

For this 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>

modify your CSS as follows:

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;
}

I applied CSS tables to #contentwrap and #content similarly to your original CSS, that way you get the vertical alignment in the middle as required.

You hard coded the image width to 300px by setting the width value in the img tag.

To get the image to scale with the width of #content as it narrows in width, set the width: 100% that way the image will fill the width of #content, and to prevent the image from getting too wide, set a max-width value as needed, 300px in my exammple.

You may run into conflicts with CSS rules in jQuery Mobile, but perhaps someone else can help with any issues is they arise (not my area of expertise).

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

Note: If you set the max-width value for the image, then you may not need to set the width attribute in the img tag.

I checked this in the latest versions of Firefox, Chrome, IE and Opera and this solution appears to work.

Solution 2

There's actually a really simple solution to this -- you need to set the table-layout property to fixed on the element that is set to display: table.

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