css image max-width无法使用Firefox / IE

Question

这里是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;
}

正如你可以看到的，如果你测试它，＆＃34; max-width：100％＆＃34;属性仅适用于Google Chrome。使用Firefox和IE，图像宽度保持不变...使用Chrome，图像适应窗口......：

我该如何解决？ （至少在IE11上）

我发现其他帖子有同样的问题，但都没有给出一个好的解决方案......

Answer 1

实际上有一个非常简单的解决方案 - 您需要在设置为table-layout的元素上将fixed属性设置为display: table。

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

Answer 2

这是实现所需布局的一种方法。

我遗漏了一些jQuery Mobile类，只使用了原生的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，这样您就可以根据需要在中间进行垂直对齐。

您可以通过在width标记中设置img值，将图片宽度硬编码为300px。

要使图像在宽度变窄时缩放宽度#content，请设置width: 100%图像将填充#content的宽度，并防止图片越来越宽，根据需要设置max-width值，在我的例子中设置为300px。

您可能会遇到与jQuery Mobile中的CSS规则冲突，但也许其他人可以帮助解决任何问题（不是我的专业领域）。

请参阅演示：http://jsfiddle.net/audetwebdesign/ZMLDD/

注意：如果您为图片设置max-width值，则可能不需要在width标记中设置img属性。< / p>

我在最新版本的Firefox，Chrome，IE和Opera中检查了这个，这个解决方案似乎有效。

Answer 3

  

永远记住，max-width不会从其他父级继承   元素。因为300px的宽度已定义为最大宽度为   100％，初始宽度值将始终覆盖最大宽度值   100％

相反，请使用min-width: 300px和max-width: 100%，这样可以在所有浏览器中使用

Answer 4

针对Firefox，IE，Chrome的响应式图片。适用于Firefox的简单解决方案

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

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