重置圖像的寬度和高度設置通過css

我試圖在html中創建一個流體佈局，包含圖像。現在，我支持2種尺寸的佈局。默認佈局用於顯示1000px寬的網站。如果屏幕足夠寬（寬度超過1200像素），我會用css媒體查詢來增強許多方面。重置圖像的寬度和高度設置通過css

我有一個DIV容器，默認佈局是600px寬，增強佈局是700px。裏面有一個隨機圖像，我知道一些元數據（寬度和高度）。如果容器太大，我可能需要縮小圖像尺寸。

所以我用這個代碼有一個流體佈局

<div class="container"> 
    <!-- for a 650px/400px image, the downsized version is 600px/369px --> 
    <img src="/image?id=1234" width="650" height="400" style="width:600px;height:369px" /> 
</div>

和風格

@media screen and (min-width:1200px){ 
    .container IMG { 
    width:auto !important; 
    height:auto !important; 
    } 
}

這裏是它如何工作的：

在的情況下，默認佈局，內聯樣式適用。所以圖像縮小到600px/369px以適應容器。否則，媒體查詢風格適用，並且圖像處於其默認寬度/高度（我知道圖像不會超過700像素，因此一切正常）。

我的問題來自圖像的加載狀態和瀏覽器保留的空間。 Chrome/Firefox的行爲是一樣的，但對我來說很奇怪。沒有用IE測試（實際上並不是我的優先級）

對於默認佈局，沒有問題，內聯樣式仍然適用。瀏覽器顯示與圖像對應的空白區域。

對於增強版式，適用「自動」尺寸。但是，瀏覽器在沒有完全加載的時候並不知道圖像的自然尺寸，並且它看起來像「auto」相當於0px。如果爲圖像設置了寬度和高度屬性，那將是完美的。但事實並非如此。結果是沒有爲圖像保留空間，這不是我想要的行爲。

我發現的第一個解決方案是爲圖像添加另一個內聯css規則。如果我添加「最小寬度：600px;最小高度：369px」，圖像的保留空間始終爲600x369像素，而不是增強版式的0像素。這更好，但還不完美。

- 你怎麼看？

是否有可能「重置」的CSS，而不是與覆蓋它的「汽車！重要」的規則？
我應該使用其他方法嗎？
我可能會使用一些javascript，但我認爲依靠它是一個壞主意。實際上，我可能有很多類似於上述的容器。我更喜歡自動解決方案（css對此很好）。

來源

2012-03-30 Mat

你知道它是否可以添加一個內嵌媒體查詢一個元素？我不認爲這是可能的。但是，如果是這樣，我可以這樣寫： – Mat 2012-03-30 14:56:41

使用.container IMG.someClass { ... }然後您可以從圖像中刪除類名來刪除CSS樣式。

來源

2012-03-30 13:48:20

這是正確的，我只需要默認佈局的樣式。所以當我檢測到增強的佈局時，我可以用Javascript刪除這個類。但正如我在我的第一篇文章結束時所說的，通過這樣做，我鬆散了CSS媒體查詢提供的所有優秀功能，不是嗎？ – Mat 2012-03-30 14:52:43

我在響應式圖像中看到的一般方法是使用父元素（如.container）更改媒體查詢的大小。在您的標記刪除的寬度和高度屬性，然後在你的CSS加：

img { 
    width: 100%; 
}

當你的父元素的大小是由媒體查詢規則規定，你的圖像將相應增長。

我把它提起來，因爲它看起來像你想使用相同的圖像文件，但只是讓它增長/縮小。主要缺點是可以在移動設備屏幕上加載較大的圖像，並添加到頁面加載。這是目前響應設計面臨的主要技術障礙，關於解決這一問題的最佳方法存在很大爭議。

來源

2012-03-30 13:55:52 chipcullen

我剛做了一個測試。其實我也面對同樣的問題，但是由於我在第一篇文章中沒有解釋的原因。我知道容器的寬度，但我不知道它的高度。我希望容器的高度與子圖像相同。因此，在圖像加載過程中，容器仍然沒有高度。 – Mat 2012-03-30 14:42:56

關於對兩種佈局使用相同的圖像，我有兩個原因：（1）如果圖像寬度小於600px，則兩個佈局的圖像完全相同。（2）我認爲從600像素到700像素的開銷不足以暗示圖像的重量減輕。但是如果我有2張圖片，我必須在服務器端存儲2張圖片。 – Mat 2012-03-30 14:48:17

Re：圖像大小 - 這是使用相同圖像的一個很好的理由。 100px的差異不足以保證更復雜的解決方案。 Re：父容器 - 如果你沒有設置父容器的顯式高度，它*應該隨圖像一起增長，而不管圖像的高度如何。你不是這種情況嗎？ – chipcullen 2012-03-30 16:52:26

你可以設置復位上覆蓋該值的width或height到initial ..

來源

2015-07-29 12:31:26

而不是沒有！使用初始..我的壞... – 2015-07-29 12:32:55

這實際上不起作用。如果圖像具有「寬度」和「高度」屬性，並且有任何設置寬度的css，那麼似乎沒有辦法讓它符合屬性值... – 2017-12-18 18:59:10

重置圖像的寬度和高度設置通過css

回答

相關問題