找出图像是水平的还是垂直的答案

【问题标题】：Find out if an image is horizontal or vertical找出图像是水平的还是垂直的
【发布时间】：2012-03-09 06:03:45
【问题描述】：

我有多张图片，想知道每张图片是水平的还是垂直的，然后给它添加一个类，以便我可以相应地设置它的样式。

我尝试了多种方法，包括这样的：

if ($(".img").width() > $(".img").height()) {
$(this).addClass("horizontal");
}

我做错了什么？谢谢！

【问题讨论】：

你将如何决定图像是水平的还是垂直的？比较尺寸是否足以让您确定它是水平的还是垂直的？

标签： jquery width image

【解决方案1】：

由于$(this)，您的代码无法正常工作。 this 不是指向此处的图像元素，而是指向范围的最新实例。

试试这个，它将使用 jQuery each 循环遍历所有图像元素，然后有条件地添加所需的类。

$("img").each(function(){
    var $this = $(this);
    if ($this.width() > $this.height()) {
        $this.addClass("horizontal");
    }
});

如果您对所有图像元素都有一个 ".img" 类，那么您可以使用类选择器。

$(".img").each(function(){
    var $this = $(this);
    if ($this.width() > $this.height()) {
        $this.addClass("horizontal");
    }
});

您也可以使用jQuery filter 方法过滤所有宽度大于高度的图像，然后一次添加所需的类。

$(".img").filter(function()
    var $this = $(this);
    return $this.width() > $this.height();
}).addClass("horizontal");

.filter() - 将匹配元素集减少为匹配选择器或通过函数测试的元素。

如果您在页面加载时执行此操作，请确保在窗口加载事件中执行此代码，这将确保所有图像都已加载。

$(window).load(function(){
     $(".img").each(function(){
        var $this = $(this);
        if ($this.width() > $this.height()) {
            $this.addClass("horizontal");
        }
     });
});

【讨论】：

这应该适合你。 height() 和 width() 函数将为您提供包括边框和边距在内的完整尺寸。您还可以进行选择并使用常规 java 脚本调用来获取没有边距或边框的高度和宽度。不要忘记也使用 jQuery API 来查找信息，过去它对我非常有帮助。 api.jquery.com 之前有人问过类似的问题，在此之前您可以将其与@ShankarSangoli 的答案stackoverflow.com/a/623174/365513 结合使用
你是最棒的！！最后一个成功了。那是另一个问题——它总是返回 0 作为宽度。我不知道为什么，因为我包裹在 document.ready 中，但我想这更“强大”？ :) 非常感谢！

【解决方案2】：

如果它没有在图像上为您提供适当的宽度/高度，则可能是它在加载图像之前计算 width.height。为此，您只需将代码包装在 $(.'img').load(function(){}); 中即可在图像加载后运行匿名函数中的代码。

这将使您的代码看起来像：

$(".img").load(function(){
    if ($(this).width() > $(this).height()) {
        $(this).addClass("horizontal");
    }
});

但是，如果您对多个图像执行此操作，则需要将其包装在每个块中：

$(".img").each(function() {
    $(this).load(function(){
        if ($(this).width() > $(this).height()) {
            $(this).addClass("horizontal");
        }
    });
});

虽然有几位发帖人说目前您的代码使用的是未定义的this

【讨论】：

【解决方案3】：

$(".img").width() 返回一个数组。尝试限制每个数组中的一项或在每个块中运行代码。

$(this) 也不会有图像的上下文。

$(".img").each(function() {
 if ($(this).width() > $this.height()) {
  $(this).addClass(".horizontal");
 }
});

【讨论】：

【解决方案4】：

你的图片有img 类吗？如果没有，您可以使用$('img') 选择所有图像。

试试.each:

$('img').each(function(){
    var t = $(this); // Cache
    if(t.width()>t.height()){
        t.addClass('horizontal');
    } else { t.addClass('vertical'); }
});

【讨论】：

【解决方案5】：

$(".img") 返回一个具有类“img”的元素数组。如果你一次做一个，它会起作用。

在此处查看示例：http://jsfiddle.net/2nnK2/

【讨论】：