根据图像宽度指定类

Question

我很好奇是否可以查看图像宽度,如果宽度小于X数,那么它会获得某个类.

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

• 如果width小于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");
});