日期:2014-05-16  浏览次数:20373 次

jquery怎样获取DIV里多个图片的尺寸?
如题
<div><img src='images/abc.jpg' class='pic'><img src='images/abc2.php' class='pic'></div>

因为我两张图的比例不是相同的;
所以我想获取这两/多张图的尺寸来算出每张图的比例;
然后将宽设为200px;用比例算出高;
赋值给DIV里对应的图片;
jQuery HTML 图片

------解决方案--------------------
jQuery(document).ready(function(){
    $('img').each(function(){ //jquery.each()循环读取所有图片
        var height = $(this).height();
        var width = $(this).width();
        if(width>200){
           $(this).css('height',Math.round(height*200/width)+'px');//如果宽度超过200px,高度等比例缩放
        }
    });
});
------解决方案--------------------
如果图片宽高被css修改过,一楼获取到的可能就不一定是图片的真正尺寸了。要获取图片的真实尺寸,可以尝试利用Image类重新加载一遍图片:
var img = new Image();
img.onload = function(){
    console.log("width:"+img.width);
    console.log("height:"+img.height);
};
img.onerror = function(){
    console.log("图片获取失败!");
};
var timer = setInterval(function(){
    if(!!img.width){
        clearInterval(timer);
        console.log("width:"+img.width);
        console.log("height:"+img.height);
    }
},500);
img.src="[图片地址]";