Assign Class based on image width

Question

I was curious if it was possible to look at an images width, and if the width is less than X number, then it would get a certain class.

Essentially I want to specify three classes for images like so:

• If width is less than 100px then the image itself will have the class .small
• If width is less than 400px then the image itself will get the class .medium
• If width is less than 600px then the image itself will get the class .large

.. etc If I need to add more sizes and classes

Is this possible?

Answer 1

var img = $("#myImage");
var width = img.width();
if (width < 100)
    img.addClass("small");
else if (width < 400)
    img.addClass("medium");
else if (width < 600)
    img.addClass("large");

Untested, but that looks about right.

Also, if you wanted to apply these rules to all images in your document, or at least all images in a specific container, you could:

$("#divWithImages img").each(function(i, el)
{
    var img = $(el);
    var width = img.width();
    if (width < 100)
        img.addClass("small");
    else if (width < 400)
        img.addClass("medium");
    else if (width < 600)
        img.addClass("large");
});