所以我正在尝试根据其中包含的图像的属性进行一些非常基本的 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/
我觉得这是我缺少的一些非常基本的东西；自从一年前获得副学士学位以来，我就没有摆弄过这些东西。感谢任何可以提供帮助的人!
最佳答案
那是因为当您读取原始尺寸时您的图像尚未加载。
您应该在加载图像时阅读尺寸:
var img = $('#kittens')[0];
img.onload = resizeDiv;
img.src = kittens[0];
关于javascript - 为什么我不能在 javascript/JQuery 中获取图像的 naturalHeight/naturalWidth？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14427704/