for ループ内で関数を呼び出していますが、関数が正しく動作していないようです
$(document).ready(function(){
function fn_get_natural_dim(){
var width = this.width;
var height = this.height;
var ratiow = width/600;
var ratioh = height/300;
if(ratiow>=ratioh)
{
height = height/ratiow;
$(slide_image).css("width","600px");
$(slide_image).css("height",height);
var margin = (300-height)/2;
$(slide_image).css("margin-top",margin);
}
else
{
width = width/ratioh;
$(slide_image).css("width",width);
$(slide_image).css("height","300px");
var margin = (600-width)/2;
$(slide_image).css("margin-left",margin);
}
}
var max_count = $(".slider").children().length;
for(var count=1;count<=max_count;count++)
{
var count_string = count.toString();
var img_name = "img" + count_string;
var slide_image = document.getElementById(img_name);
var img = new Image();
img.onload = fn_get_natural_dim();
img.src = $(slide_image).attr("src");
}
});
私の HTML には、ID #img1、#img2 などの画像がいくつかあります。それぞれについて、new Image() を呼び出して自然な寸法を取得し、サイズを 600x300 div に合わせて調整しています。上記は関数 fn_get_natural_dim() 内にあります
forループ内でこの関数を呼び出すと、機能しません。具体的には、幅と高さの変数はゼロになります。最初は、関数の「this」がimg変数を指していないと思ったので、「this」を「img」に切り替えましたが、それでも機能しません。