獲取源圖像中沒有指定寬度和高度的圖像尺寸

我想要獲取未在HTML源代碼中指定寬度和高度標籤的圖像的高度和寬度。獲取源圖像中沒有指定寬度和高度的圖像尺寸

即

<img src="http://www.mysite.com/imge.jpg" id="my_img" />

我想要做的就是圖像的寬度和高度加載之前。我正試圖完成以下任務，如果您知道更好的解決方案，請告訴我。

我想這樣做，因爲我想保留我的網站中的所有圖像小於或等於600px。所以如果圖片的寬度> 600px，我會將其降低到600px。否則，我保持其寬度不變。

我的選擇：以下任何代碼都不適用於此任務，因爲它們在圖像加載後獲取圖像大小;最初他們顯示寬度爲零。

<script type="text/javascript"> 
    var img = document.getElementById('my_img'); 
    var width = img.clientWidth; 
    var height = img.clientHeight; 
    alert('Width: ' + width + ' Height:' + height); // FAIL 

    var timg = document.getElementById('test').width; 
    alert(timg); // FAIL too 
</script>

我的HTML代碼：

<img src="http://www.mysite.com/imge.jpg" id="my_img" />

希望這是顯而易見的。

謝謝。

來源

2012-12-25 printfmyname

「我想要做的就是圖像的寬度和高度加載之前。」 - 好吧，如果可能的話，瀏覽器會爲你做。你需要等待這些信息。 –

使用JQuery：$（'＃my_img'）。height（）和$（'＃my_img'）。width（）來檢索圖像大小。但在你的情況下，你需要使用CSS提出的@Giona – sdespont

@sdespont我認爲這將工作後圖像加載頁面，對不對？ printfmyname，我想你可以在服務器端代碼中做這個，比如java或php。 – Patriks

jsFiddle

爲什麼使用JavaScript？有了這個CSS規則，你可以在寬度限制600px：

#my_img { max-width:600px; }

來源

2012-12-25 07:58:18 Giona

** + 1 **優秀的答案！ – arttronics

這樣的天才答案..感謝Giona和arttronics。其他人都花時間回答。 – printfmyname

感謝@arttronics設置小提琴！ – Giona

獲取源圖像中沒有指定寬度和高度的圖像尺寸

回答

相關問題