Jquery 应用“最大宽度”和“最大高度”后获取当前图像宽度和高度

这是

HTML:

Javascript:

$(window).load( function(){
var $imgs = $("div.container img");

$imgs.each( function(){
    var cW = $(this).parent().width();
    var cH = $(this).parent().height();
    var w = $(this).width(); //I want the CURRENT width, not original!!
    var h = $(this).height(); //I want the CURRENT height, not original!!
    var dW = w - cW;
    var dH = h - cH;

    console.log( cW + " " + cH + " " + w + " " + h + " " + dW + " " + dH );

    if ( w > h ){ 
        $(this).addClass("wide");
        $(this).css("left",  -dW/2);
    }
    else if ( w < h ){
        $(this).addClass("tall");
        $(this).css("top",  -dH/2);
    }
    else { $(this).addClass("square"); }                    
});
});​

$（窗口）.load（函数（）{
var$imgs=$（“div.container img”）；
$imgs.每个（函数（）{
var cW=$（this.parent（）.width（）；
var cH=$（this.parent（）.height（）；
var w=$（this）.width（）；//我要的是当前宽度，不是原始宽度！！
var h=$（this）.height（）；//我要的是当前高度，不是原始高度！！
var-dW=w-cW；
var-dH=h-cH；
日志（cW+“”+cH+“”+w+“”+h+“”+dW+“”+dH）；
如果（w>h）{
$（此）.addClass（“宽”）；
$（this.css（“左”，-dW/2）；
}
否则如果（w

我正在通过javascript向图像元素添加一个基于其比例的类。这3个类将设置图像的最大宽度和最大高度css属性，从而调整它们的大小。 之后，我需要调整大小的图像的尺寸，但我能得到的只是原始图像的尺寸。那不好！我试过使用

width（）

，

outerWidth

，

naturalWidth

，各种宽度，但我就是做不好

那么，在对图像应用了CSS规则（如

max width

和

max height

）之后，是否有办法获得图像的尺寸？最好是一致的方式，不使用计时器和间隔，或类似的东西

非常感谢

查看jsfiddle。在应用具有

max height

/

max width

的类之前，而不是在应用该类之后，尝试获取宽度/高度

以下是测试代码（请检查second console.log）：

$（窗口）.load（函数（）{
var$imgs=$（“div.container img”）；
$imgs.每个（函数（）{
var cW=$（this.parent（）.width（）；
var cH=$（this.parent（）.height（）；
var w=$（this）[0].clientWidth；//我想要的是当前宽度，而不是原始宽度！！
var h=$（this）[0].clientHeight；//我想要的是当前高度，而不是原始高度！！
var-dW=w-cW；
var-dH=h-cH；
日志（cW+“”+cH+“”+w+“”+h+“”+dW+“”+dH）；
如果（w>h）{
$（此）.addClass（“宽”）；
$（this.css（“左”，-dW/2）；
}
否则如果（w

width（）

，

outerWidth

-始终返回当前宽度

---

naturalWidth

/-这是为了获得原始图像，就像没有应用任何样式一样，图像的宽度/高度（仅适用于较新浏览器中的IMG标记）

width（）

确实提供了当前宽度。。。呜呜呜呜。。。。。该死，太容易了！！对不起打扰你了，我完全没注意到。。哈哈哈！

div.container { width: 200px; height: 200px; line-height: 200px; overflow: hidden; border: 10px solid white; box-shadow: 0 1px 8px #BBB; margin: 10px; text-align: center; }
            div.container img { position: relative; vertical-align:middle; }
            div.container img.wide { max-height: 100%; }
            div.container img.tall { max-width: 100%; }
            div.container img.square { max-width: 100%; }​

$(window).load( function(){
var $imgs = $("div.container img");

$imgs.each( function(){
    var cW = $(this).parent().width();
    var cH = $(this).parent().height();
    var w = $(this).width(); //I want the CURRENT width, not original!!
    var h = $(this).height(); //I want the CURRENT height, not original!!
    var dW = w - cW;
    var dH = h - cH;

    console.log( cW + " " + cH + " " + w + " " + h + " " + dW + " " + dH );

    if ( w > h ){ 
        $(this).addClass("wide");
        $(this).css("left",  -dW/2);
    }
    else if ( w < h ){
        $(this).addClass("tall");
        $(this).css("top",  -dH/2);
    }
    else { $(this).addClass("square"); }                    
});
});​

$(window).load( function(){
    var $imgs = $("div.container img");

    $imgs.each( function(){
        var cW = $(this).parent().width();
        var cH = $(this).parent().height();
        var w = $(this)[0].clientWidth; //I want the CURRENT width, not original!!
        var h = $(this)[0].clientHeight; //I want the CURRENT height, not original!!
        var dW = w - cW;
        var dH = h - cH;

        console.log( cW + " " + cH + " " + w + " " + h + " " + dW + " " + dH );

        if ( w > h ){ 
            $(this).addClass("wide");
            $(this).css("left",  -dW/2);
        }
        else if ( w < h ){
            $(this).addClass("tall");
            $(this).css("top",  -dH/2);
        }
        else { $(this).addClass("square"); }     
        var w = $(this).width(); //I want the CURRENT width, not original!!
        var h = $(this).height(); //I want the CURRENT height, not original!!
        console.log( w + " " + h );

    });
});​