2

そのため、そこに含まれる画像のプロパティに基づいて、非常に基本的な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/

私が見逃しているのは非常に基本的なことのように感じます。1年前の準学士号以来、私はこのようなものをいじっていません。助けてくれる人に感謝します！

4

1 に答える 1

6

これは、元のサイズを読み取ったときに画像がまだ読み込まれていないためです。

画像が読み込まれるときに寸法を読む必要があります：

 var img = $('#kittens')[0];
 img.onload = resizeDiv;
 img.src = kittens[0];
于 2013-01-20T18:25:40.287 に答える