Using Jquery or Css to set heights or width of a unknown number of elements

I have a very simple layout of a product Image and an unknown number of alt images to the right of it.

I need a way to set the alt's to have a percent of some sort that makes them all add up to the height of the main image that way I get a even look.

I have tried some simple jQuery but it doesn't开发者_JAVA百科 seem to be giving me the layout I want.

Here is a link to my fiddle http://jsfiddle.net/r7MgY/7112/

Your main problem is that you are setting the height of the small images to a % of the container, not the image itself. You can solve this by just setting the height of the big image to 100%, or alternatively calculate the height of the big image / number of elements to get the pixel height of the small images.

Secondly, you are setting the width and not the height on the small images.

Here is an edited version of your script that will help you along:

$(function() {
    var altImages =$('div.alt').children('img');
    var altCount = altImages.length;

    var smlHeight = Math.floor($('#big').height() / altCount);
    smlHeight -=2; //account for borders
    smlHeight -=2; //account for padding
    smlHeight -=2; //account for margins

    altImages.css('width',smlHeight + 'px');
    $('.alt').css('width',smlHeight + 'px');
});

Notes:

• You will have to add an id to the big image (I assumed id='big')
• You will have to tweak the offsets for borders, padding, and margins. They aren't quite right yet, but with some playing you should be able to get it.