檢測圖像寬度時maxWidth使用

考慮以下代碼：檢測圖像寬度時maxWidth使用

var img = new Image(); 

img.onload = function() { 
    console.log(this.width); 
}; 

img.src = 'http://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Gull_portrait_ca_usa.jpg/800px-Gull_portrait_ca_usa.jpg'; 

document.body.appendChild(img);

這將打印的圖像的寬度（800）正確。但是，如果我申請使用的CSS最大寬度：

img {max-width: 400px}

測試用例：http://jsfiddle.net/MSjnM/

JS代碼上面會打印出400代替。這有點令人困惑，因爲人們會認爲width屬性代表原始圖像寬度，而不是計算的寬度。

我們更加混亂的東西，如果我寬度檢測後的onload事件的圖像添加我得到不同的結果：

var img = new Image(); 

img.onload = function() { 
    console.log(this.width); 
    document.body.appendChild(img); 
}; 

img.src = 'http://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Gull_portrait_ca_usa.jpg/800px-Gull_portrait_ca_usa.jpg';

測試用例：http://jsfiddle.net/MSjnM/2/

這將打印出800相反，即使CSS已經應用。我認爲這是因爲在之後附加了圖像我檢測到了寬度，並且一旦將圖像插入到DOM中，就會應用最大寬度。

好的，如果我想獲得原始圖像大小，無論何時或如果在DOM中插入IMG元素還是應用了任何CSS樣式，我該如何做到自動防故障？

來源

2012-03-30 David

使用FX11和Op11.61你都撥弄打印「400」。 – fcalderan 2012-03-30 08:51:21

@FabrizioCalderan我在Chrome中進行了測試，但那更令人擔憂...... – David 2012-03-30 08:51:53

好的，我改變了一些代碼，以便在瀏覽器中獲得相同的效果，謝謝Fabrizio。 – David 2012-03-30 08:54:09

對於我來說：在IE9，歌劇，Safari（PC），FF和Chrome的naturalWidth/naturalHeight -Properties返回所需值

http://jsfiddle.net/MSjnM/5/

來源

2012-03-30 09:02:00

不錯，+1：支持IE版本？ – fcalderan 2012-03-30 09:15:46

IE9正如我寫的。在IE8寬度爲我返回800。 – 2012-03-30 09:20:15

我也可以確認Chrome 20.0的作品 – 2012-07-24 13:24:17

加載圖像獨立成一個新的Image對象，那裏寬度：

var img = new Image(); 
img.src = 'http://placehold.it/350x150' 
console.log(img.width);

來源

2012-03-30 08:55:21 Baxter

這在Safari中不可靠。另外，如果圖像存在於DOM中並且已應用最大寬度，則它不起作用。 – David 2012-03-30 08:56:34

旁註：圖像現在應該在緩存中，所以在這裏沒有額外的請求/性能損失。 – dirkbonhomme 2012-03-30 08:58:20

@大衛的想法：它在Safari中僅僅是不可靠的，因爲你有一個CSS規則使得所有'都有最大寬度？當然，即使將CSS規則應用於不在DOM中的Image（）對象，只要您可以使CSS規則更具體，那麼就不會有問題？ – GregL 2012-03-30 09:02:33

檢測圖像寬度時maxWidth使用

回答

相關問題