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 个答案: