css 图像最大宽度不适用于 Firefox / IE答案

【问题标题】：css image max-width not working with Firefox / IEcss 图像最大宽度不适用于 Firefox / IE
【发布时间】：2014-08-06 11:27:14
【问题描述】：

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

如您所见，如果您对其进行测试，“max-width: 100%”属性仅适用于 Google Chrome。在 Firefox 和 IE 中，图像宽度保持不变...在 Chrome 中，图像适应窗口...：

我该如何解决？（至少对于 IE11）

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

【问题讨论】：

你试过去掉图片的宽度属性吗？
显示：表格；最大宽度：500px；给出了 max-width:100% 的 2 个原因；不能在孩子上应用 :( ，在 img 上尝试 max-width:500px

标签： css image internet-explorer firefox responsive-design

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

适用于 Firefox、IE、Chrome 的响应式图像。适用于 Firefox 的简单解决方案

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

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

【讨论】：

【解决方案3】：

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

我省略了一些 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，这样您就可以根据需要在中间进行垂直对齐。

您通过在img 标记中设置width 值将图像宽度硬编码为300 像素。

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

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

查看演示：http://jsfiddle.net/audetwebdesign/ZMLDD/

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

我在最新版本的 Firefox、Chrome、IE 和 Opera 中检查了这个，这个解决方案似乎可以工作。

【讨论】：

【解决方案4】：

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

因此请改用min-width: 300px 和max-width: 100%，这将使其在所有浏览器中都可以使用

【讨论】：