Question

Image sources hold true image dimensions (width/height). In a div#pics with 5 images, 3 images are 16X16, and 2 images are 2×2. Both the 2×2 images have a class applied to them that makes them 16×16, the other 3 images are 16×16. The problem is that, when I filter this way:

var Images = $('#pics img');
var FilteredImages = Images.filter(function(){
    return ($(this).width() == 16) || ($(this).height() == 16)
});

FilteredImages holds all 5 images, because it takes into consideration the class that makes the 2 2×2 images 16×16. How can FilteredImages hold only the 3 images that their source image size (not css), is 16×16?

Answer 1

I’d suggest:

var Images = $('#pics img'),
    FilteredImages = Images.filter(function(){
        var that = this;
        return (that.naturalWidth == '16px') || (that.naturalHeight == '16px')
    });

References:

• HTMLImageElement (naturalHeight and naturalWidth are in the table).