所有瀏覽器的CSS圖像自動寬度？

我有一些CSS定義我img標籤：所有瀏覽器的CSS圖像自動寬度？

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

它可以在一些移動瀏覽器我都試過就好，以及谷歌瀏覽器在桌面上。但是，它似乎在IE或FireFox中不起作用。我的意思是，當你調整窗口大小時。看看我正在處理的沙箱網站：http://terraninstitute.com。主頁上的圖像有意成爲一張巨大的圖片。另外導航到信息（主菜單），然後導航到新手（側面菜單），並注意底部的地圖圖像。在我的Droid（以及其他一些設備上，我可以掌握）以及谷歌瀏覽器中，這看起來相當不錯。在IE和FireFox中，並非如此。

我錯過了什麼嗎？衝突的風格定義？如果是的話，我還沒有找到它們。

TIA

來源

2011-09-22 Keith Barrows

爲什麼不直接設置寬度爲100％？ –

你不必要聲明你像的寬度多次在文檔中，並宣佈一個最大 - 錯誤的方式。如果您聲明最大寬度：100％連同寬度：100％，那麼您應該爲圖片定義最大尺寸/邊界（例如600px）聲明，因爲圖像將以原樣擴大100％。

從你的CSS下面幾行取出寬度聲明：

行116：刪除img聲明都在一起，是不是需要它。

行365：刪除max-width:100%和height:auto;屬性作爲它們不需要（如果你能刪除的聲明都在一起，你可以聲明別處）

線121：現在只要堅持這一個，只是添加以下內容：

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

來源

2011-09-22 18:12:30

謝謝。我清理了各種CSS文件中的所有img標籤，並留下inuit.css文件中的標籤。這是有趣的玩寬度與最大寬度，你是對的。寬度是我所需要的。當我搜索它時，出現了很多錯誤的轉折。而inuit.css是爲CSS3和自動縮放設置的，所以我只是假設*它應該始終工作。當我第一次開始時，它確實有效（我想）。此外，現在又添加了太多的CSS定義，最後事情開始向南。謝謝！ –

不要使用!important

讓你的CSS更speficic：

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

來源

2011-09-22 17:53:48

對於誰低估了Diodeus：他並不認爲這是一個解決方案。他被指出了一個很好的CSS練習。 –

in style.css line line 116，212 and inuit.css line 365.刪除所有這些。

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

這就是你需要的。

爲響應圖像

來源

2011-09-22 18:23:40 Bala

Bootstrap解決方案：

img { 
    /* Responsive images (ensure images don't scale beyond their parents) */ 

    /* Part 1: Set a maxium relative to the parent */ 
    max-width: 100%; 

    /* IE7-8 need help adjusting responsive images */ 
    width: auto\9; 

    /* Part 2: Scale the height according to the width, otherwise you get stretching */ 
    height: auto; 

    vertical-align: middle; 
    border: 0; 
    -ms-interpolation-mode: bicubic; 
}

來源

2012-10-28 15:44:04 dino

所有瀏覽器的CSS圖像自動寬度？

回答

相關問題