css image max-width不能使用Firefox / IE [英] css image max-width not working with Firefox / IE

问题描述

以下是

注意： 如果您为图片设置了 max-width 值，那么您可能不需要设置 width 属性在 img 标签中。

我在Firefox，Chrome，IE和Opera并且此解决方案似乎可以正常工作。

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...

解决方案

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.

这篇关于css image max-width不能使用Firefox / IE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！