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

这是一个例子

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>

如您所见，如果您对其进行测试，“最大宽度：100%”属性仅适用于Google Chrome。使用Firefox和IE，图像宽度保持不变。。。使用Chrome，图像适应窗口…：

我怎样才能修好它？（至少使用IE11）

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

请始终记住，“最大宽度”不会从其他父级继承 元素。因为300px的宽度已定义为最大宽度 100%，初始宽度值将始终覆盖最大宽度值 百分之百

---

因此，请改用

最小宽度：300px

和

最大宽度：100%

，这将使其在所有浏览器中都能工作以下是实现所需布局的一种方法

我省略了一些jQuery移动类，只使用了本机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表应用到 > CordnReals和SuthCudio类似于原来的CSS，这样你就可以根据需要在中间得到垂直对齐。

通过在

img

标记中设置

width

值，将图像宽度硬编码为300px

要使图像在宽度缩小时与

#content

的宽度缩放，请设置

宽度：100%

，这样图像将填充

#content

的宽度，并防止图像变得太宽，请根据需要设置

max width

值，在我的示例中为300px

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

请参见演示：

注意：如果为图像设置了

max width

值，则可能不需要在

img

标记中设置

width

属性

---

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

Firefox、IE、Chrome的响应图像。在Firefox中工作的简单解决方案

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

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

.article{背景：透明0%0%/100%auto；}
.文章img{最大宽度：100%；}

实际上有一个非常简单的解决方案——您需要在设置为

display:table

的元素上将

table layout

属性设置为

fixed

#contentwrap{
显示：表格；
表布局：固定；
身高：100%；
最大宽度：500px；
保证金：0自动；
位置：相对位置；
}

是否尝试删除图像的宽度属性？显示：表格；最大宽度：500px；给出最大宽度为100%的两个原因；无法在子对象上应用：（，请在img上尝试最大宽度：500px

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

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

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