jquery - 根据图像宽度分配类别

Question

我很好奇是否可以查看图像宽度，如果宽度小于 X 数字，那么它将获得某个类别。

本质上我想为图像指定三个类，如下所示:

• 如果宽度小于 100px，则图像本身将具有 .small 类
• 如果宽度小于 400px，则图像本身将获得 .medium 类
• 如果宽度小于 600px，则图像本身将获得 .large 类

..等等如果我需要添加更多尺寸和类别

这可能吗？

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

未经测试，但看起来差不多。

此外，如果您想将这些规则应用于文档中的所有图像，或者至少应用于特定容器中的所有图像，您可以:

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