為什么無法在javascript / JQuery中獲取圖像的naturalHeight / naturalWidth？

Question

因此，我嘗試根據其中包含的圖像的屬性來做一些非常基本的div調整大小。 我知道我可以做一些非常基本的事情，例如在圖像周圍設置背景填充並達到相同的效果，但這是個人的挑戰。

我遇到的問題是，當我嘗試獲取圖像的naturalHeight或naturalWidth值時，得到的值為0。但是，當我嘗試使用控制台獲取這些值時，它們將返回正確的值。 另外，我的resizeDiv（）函數在控制台中未定義。

這是代碼：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>kitten_resize - WesGilleland.com</title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
    var kittens = new Array("100x100_kitten.jpeg","150x150_kitten.jpeg","200x150_kitten.jpeg");

    $('#kittens').attr('src', kittens[0]); //set the image

    function resizeDiv() {
        var img = document.getElementById('kittens');
        var imgH = img.naturalHeight;
        var imgW = img.naturalWidth;
        $('div').width(imgW);
        $('div').height(imgH);
        console.log('Current imgH: '+imgH);
        console.log('Current imgW: '+imgW);
    };

    resizeDiv();

});
</script>

<style>
div {
    background-color: black;
    padding: 10px;
    margin: auto;
}
</style>
</head>

<body>
<div>
<img id="kittens" src='' />
</div>
</body>
</html>

您也可以在這里找到工作副本： http : //www.wesgilleland.com/projects/kitten_resize/

我覺得這是我最想念的東西； 自從一年前獲得副學士學位以來，我再也沒有擺弄這些東西。 感謝任何能提供幫助的人！

Answer 1

這是因為讀取原始尺寸時尚未加載圖像。

加載圖像時，您應該閱讀尺寸：

 var img = $('#kittens')[0];
 img.onload = resizeDiv;
 img.src = kittens[0];

為什么無法在javascript / JQuery中獲取圖像的naturalHeight / naturalWidth？

問題描述

1 個解決方案

解決方案1
5 已采納 2013-01-20 18:25:40

為什么無法在javascript / JQuery中獲取圖像的naturalHeight / naturalWidth？

問題描述

1 個解決方案

解決方案1 5 已采納 2013-01-20 18:25:40

解決方案1
5 已采納 2013-01-20 18:25:40