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

回答

相關問題