CSS：圖片最大寬度在Firefox和IE中不起作用

Question

img { 
    max-width: 100% !important; /* Set a maxium relative to the parent */ 
    width: auto\9 !important; /* IE7-8 need help adjusting responsive images */ 
    height: auto; /* Scale the height according to the width, otherwise you get stretching */ 
    vertical-align: middle; 
    border: 0; 
    display: block; 
    -ms-interpolation-mode: bicubic; 
} 

以上CSS取自Twitter Bootstrap，它允許響應圖像。唯一的問題是這對Firefox和IE沒有任何影響。

在下列情況下：

<div class="row-fluid"> 
    <div id="logo" class="span4"> 
     <a href="<?= home_url('/') ?>"><img src="<?= get_template_directory_uri() ?>/assets/images/logo.png" /></a> 
    </div> 
</div> 

http://dev.netcoding.net/lowsglass/about-us/ - 下面是該問題的頁面。

在Firefox或IE中，將頁面縮小到432px以下，您將看到圖像不再遵循最大寬度（當它們超過764像素時）。

如何在不使用圖像容器–的情況下修復此問題–以使響應圖像在Firefox和IE中正常工作？

Answer 1

實際上，問題不是img標記受到影響，而是span *容器。當Bootstrap Responsive獲得某個特定點時，它將關閉浮動，並將寬度設置爲100％。當該容器彈回到100％時，（你的img標籤）內的孩子完全按照你所說的去做，它擴展到100％的最大寬度。

看看這個從responsive.css ...上面樣式表中的聲明，你會看到這一點：

/* Landscape phone to portrait tablet */ 
@media (max-width: 767px) { 

[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] { 
    -moz-box-sizing: border-box; 
    display: block; 
    float: none; 
    margin-left: 0; 
    width: 100%; 
} 

也就是說是什麼原因造成的IMG爲「調整」 ...它的容器由於Bootstrap響應式設置的方式，不再縮小到某個點。

要阻止這種情況，您可以修改Bootstrap樣式表（在這種情況下，您需要在您想更新Bootstrap文件時重做更改），也可以在自己的樣式表中執行以下操作：

/* Landscape phone to portrait tablet */ 
@media (max-width: 767px) { 

[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] { 
    -moz-box-sizing: border-box; 
    display: inline-block; 
    float: left; 
} 

，將放在浮動回來，但是，你仍然留下了寬度的問題，因爲在該屏幕寬度的缺省引導風格嘗試設置寬度爲100％。你可以嘗試設置width:auto，然後希望每個特定跨度步長（.span1，.span2等）的寬度將被允許接管，但是你將不得不測試它看看會發生什麼最適合你的情況。

Answer 2

而不是width:auto，請嘗試width:100%。

最佳，

辛西婭

Answer 3

撞到在類似的問題，使用引導框架，只有Chrome瀏覽器調試... Biiig錯誤©實現大量網站設計的後:)看來，該冷卻流體引導樣式在IE和Mozilla中根本不適用於圖像。所有圖像沒有調整大小，並有原始寬度，有時比我預期看到的要寬得多...

我有很多類似的地方有兩列的div - span6左欄和span6右欄（這些是流體Bootstrap網格的樣式）。有時在這些列圖像被放置在文本行之間，正如你所看到的，圖像沒有在IE \ Mozilla中很好地調整大小，並且所有的酷炫設計都變得不是很好:(

谷歌搜索並嘗試了一些建議github我決定使用jQuery :)我向列容器（imageContainer for fluid span12 row）添加了類，併爲圖片添加了類50perc，這些圖片需要適當調整大小（每個圖片的大小應爲容器大小的50％）。這裏的代碼：

$(function(){ 
    var cont = $('.imageContainer'); 
    $('.50perc').each(function(i, el){ 
    $(el).width(cont.width()/2); 
}); 

p.s.事實上，在window.resize事件處理程序中使用此功能將會非常有效:)

Answer 4

我一直在使用Firefox/IE和max-width，特別是在顯示元素：inline-block時遇到了很多困難。我使用下面的CSS only解決方案來添加我的修復程序。

// Styles for Firefox 
@-moz-document url-prefix() { 
    #logo img { 
     width: 100%; 
    } 
} 

// Styles for IE10 
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
    #logo img { 
     width: 100%; 
    } 
} 

Answer 5

跑進同樣的問題，還沒有找到一個修復或CSS僅劈，除了迫使寬度：100％在小尺寸的瀏覽器中，當圖像的自然寬度將通常更大比頁面的寬度（在這裏，我認爲我沒有任何圖像比480像素窄）：

img 
{ 
    width: auto; 
    max-width: 100%; 
    height: auto; 
} 

@media screen and (max-width: 480px), only screen and (max-device-width: 480px) and (orientation: portrait) 
{ 

    @-moz-document url-prefix() { 
     /* Firefox doesn't respect max-width in certain situations */ 
     img 
     { 
      width: 100%; 
     } 
    } 

但是，這仍然會迫使有自然更小的寬度要被炸飛的圖像，這是壞。所以在這一點上，如果JavaScript是可行的或已在使用，我想補充一點，達到每幅圖像：

僞代碼：

$('img').css('max-width', this.actualFullSizeWidth + 'px'); 

...這應該覆蓋CSS最大寬度規則，並保證圖像不會比實際寬度大。

Answer 6

爲Firefox，IE，Chrome瀏覽器響應圖像。在Firefox

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

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

Answer 7

Firefox的作​​品簡單的解決方案未能與max-width/height如果width/height沒有定義縮放圖像。所以有兩種方法。在vw和vh

width: 100%; 
max-width: 100%; 

2.使用max-width和max-height：

1.設置寬度和最大寬度

max-width: 90vw; 

拿什麼圖像將有最大90可見寬度的百分比。玩的開心！