加载每个图像后的防火功能

Question

我正在尝试用图像填充div并调整图像大小以适合他们的位置。问题是，当未加载图像时，无法从元素中采样尺寸x，y。这是我在查找堆栈溢出的一些示例后尝试做的事情。它不起作用......

    $.each(data.data.children, function(i,item){
        // Some images come in with a busted link. Hence the IF statement...
        if (item.data.url.indexOf(".jpg")>0){
            var imgTitle = item.data.title;
            imgTitle = imgTitle;
            $('<div id="c'+i+'"></div>').attr("class", "imgDiv").appendTo("#photos");
            $("<img/>").attr("src", item.data.url).attr("id", "pic"+i).attr("class", "pics").appendTo("#c"+i);
                .load(function(){
                    $(this).fadein("slow");
                    if (iWidth>iHeight){
                        $('#pic'+i).width(270);
                        $('#pic'+i).height(parseInt(270-imgTitle.length/3));
                    }
                });

            $("<p>"+imgTitle+"</p>").attr("id", "p"+i).appendTo("#c"+i);  
            $("<img/>").attr("src", "images/RedX2.png").attr("class", "xit").appendTo("#c"+i);

            var mImg = $('#pic'+i)[0];
        }
    });

或者，有没有办法按比例匹配填充空间内的图像？

TIA

DK

Answer 1

您可能根本不需要任何javascript。有关使用CSS将图像自动调整为包含它的div的方法，请参阅此文章。

How do I auto-resize an image to fit a div container