Find out if an image is horizontal or vertical

Question

I have multiple images and want to find out if each image horizontal or vertical and add a class to it so I can style it accordingly.

I tried multiple things including something like this:

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

What am I doing wrong? Thank you!

How will you decide if the image is horizontal or vertical? Is comparing the dimensions enough for you to decide it is horizontal or vertical? — ShankarSangoli, Feb 17 '12 at 20:37

ShankarSangoli · Accepted Answer · 2012-02-17T20:46:37.347

Your code is not working because of $(this). this is not pointing to the image element here but it is pointing to most recent instance of the scope.

Try this which will use jQuery each loop to loop through all the image elements and then add the required class conditionally.

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

If you have a class ".img" to all the image elements then you can use the class selector.

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

Alternatively you can use jQuery filter method to filter all the images which have width greater than height and then add the required class at once.

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

.filter() - Reduces the set of matched elements to those that match the selector or pass the function's test.

If you are doing this on page load then make sure you execute this code inside window load event which will ensure that all the images are loaded.

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

This should work for you. The height() and width() functions will give you back the full size including borders and margins. You can also make your selection and use regular java script calls to get the height and width without margins or borders. Don't forget to use the jQuery API to look up information too, it has been extremely helpful to me in the past. http://api.jquery.com/ A similar question has been asked like this before which you can use it in conjunction with @ShankarSangoli's answer http://stackoverflow.com/a/623174/365513 — Jason Zambouras, Feb 17 '12 at 20:51
You're the best!! The last one did the trick. That was another problem -- it would always return 0 for the width. I couldn't figure out why because I wrapped in document.ready, but I guess that's more "powerful"? :) Thanks so much! — claras, Feb 17 '12 at 21:08

score 2 · Answer 2 · answered Feb 17 '12 at 20:43

If it isn't giving you a proper width/height on the image then it could be that it is calculating the width.height before the image has been loaded. To do this all you need to do is wrap your code in $(.'img').load(function(){}); This runs the code in the anonymous function once the image loads.

This would then make your code look like:

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

However if you are doing this for multiple images then you will need to wrap that in an each block:

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

Though a few posters are right in saying that currently your code is using an undefined this

score 0 · Answer 3 · answered Feb 17 '12 at 20:38

$(".img").width() returns an array. try limiting to one item in each array or running the code in an each block.

$(this) would not have a context of the image either.

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

score 0 · Answer 4 · answered Feb 17 '12 at 20:41

Does your images have a img class? If not you can use $('img') to select all images.

Try .each:

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

score 0 · Answer 5 · answered Feb 17 '12 at 20:42

0

$(".img") returns an array of elements with the class "img". If you do them one at a time, it works.

See an example here: http://jsfiddle.net/2nnK2/

answered Feb 17 '12 at 20:42

allicarn

2,859
2
28
47

Find out if an image is horizontal or vertical

5 Answers5