Question

I need a jQuery function to measure the height of an image, and add margin to the IMG element, so it will always result with a regular number that divides by 17 (which is my line-height).

Any help would be appreciated. Thanks.

UPDATE: I changed the title of the question and replaced PHP with jQuery. Coming to think about it, I need the function to run after the DOM is ready, on all images in a specific DIV. jQuery is more sensible than PHP in that case.

Answer 1

If I understand your question correctly you want to know how to get each image height and add a margin as needed to get the height to a number evenly divisible by 17.

Here is a quick stab at the issue:

$(document).ready(function(){
       $('img').each(function() {
             var height = $(this).height;
             var modulus = height % 17;
             if(modulus != 0) {
                 var marginToAdd = 17 - modulus;
                 $(this).css("margin-bottom", marginToAdd); 
             }
       });
});

So what the above does is get each image on the page by it’s tag. If you don’t want every image on the page you might want to put all the images in a container so you have a more discriminating selector. Then it get the remainder from the division of the height by 17. If the remainder is 0 it does nothing if it is non-zero it figures out the margin that needs to be added to make it evenly divisible by 17 and adds it to the bottom of the image.