应用最大宽度和最大高度后获取当前图像的宽度和高度

Question

应用最大宽度和最大高度后获取当前图像的宽度和高度

3

这是我的示例：链接 HTML：

<div class="container">
    <img src="http://placehold.it/500x500" alt="500x500" />
</div>
<div class="container">
    <img src="http://placehold.it/100x500" alt="100x500" />
</div>
<div class="container">
    <img src="http://placehold.it/500x100" alt="500x100" />
</div>
<div class="container">
    <img src="http://placehold.it/500x800" alt="500x800" />
</div>
<div class="container">
    <img src="http://placehold.it/800x500" alt="800x500" />
</div>
<div class="container">
    <img src="http://placehold.it/100x100" alt="100x100" />
</div>
<div class="container">
    <img src="http://placehold.it/200x100" alt="200x100" />
</div>

CSS：

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%; }

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"); }                    
});
});

我正在通过JavaScript为图像元素添加一个类，基于它们的比例。这3个类将设置图像的max-width和max-height CSS属性，从而调整它们的大小。之后，我需要调整大小后的图像尺寸，但是我只能得到原始图像的尺寸。那不太好！我尝试使用width()、outerWidth、naturalWidth等各种宽度，但我就是无法正确获取它。

所以，有没有一种方法可以在应用了像max-width和max-height这样的CSS规则之后获取图像的尺寸？最好是一种一致的方法，而不是使用定时器和间隔，或类似的东西。

非常感谢！

- RedKnight91

width()函数会返回当前元素的宽度... http://jsfiddle.net/mYZVR/ - Curtis

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Viktor S. · Accepted Answer

请查看这个jsfiddle。您正在尝试在应用具有max-height/max-width的类之前获取宽度/高度，而不是在应用后。

这是测试代码（检查第二个console.log）：

$(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 );

    });
});

width(), outerWidth - 这总是返回当前宽度。

naturalWidth/naturalHeight - 这是获取图像的原始宽度/高度（仅在较新的浏览器中适用于 IMG 标记），不应用任何样式。