css image max-width不适用于Firefox/IE

这里是JsFiddle。css image max-width不适用于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>

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

正如你可以看到，如果你测试它的 “最大宽度：100％” 属性只适用于谷歌浏览器。随着Firefox和IE浏览器，图像宽度保持不变......有了Chrome，图像适应窗口...：

enter image description here

我怎样才能解决呢？（至少IE11）

我发现其他职位同样的问题，但没有得到很好的解决...

来源

2014-06-16 user3544117

你试过去掉图片的width属性吗？ – Tom

display：table; max-width：500px;为什么max-width：100％有两个原因。对孩子不能应用:(，试试max-width：500px对img –

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

我遗漏了一些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的最新版本中检查过此问题，并且此解决方案似乎可行。

来源

2014-06-16 16:13:12

Thx为答案，我会检查与Jquery移动... – user3544117

让我们知道，如果它的工作，我很好奇。祝你好运！ –

没问题与JQuery的移动... http://jsfiddle.net/ZMLDD/5/。再次 – user3544117

一定要记住，最大宽度不从其他家长元素继承。作为300像素的宽度已经用的 100％最大宽度限定，初始宽度值将总是覆盖最大宽度值 100％

因此，不是使用min-width: 300px和max-width: 100%这将使在所有浏览器上工作

来源

2014-06-16 15:34:22 mohamedrias

为Firefox，IE，Chrome浏览器响应图像。在Firefox

作品简单的解决方案

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

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

来源

2015-06-11 08:37:22 Manuel

有实际上是一个非常简单的解决方案，这一点 - 你需要的table-layout属性设置为fixed被设置为display: table的元素。

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

来源

2015-11-06 18:57:16

css image max-width不适用于Firefox/IE

回答

相关问题