Photo Gallery - Dynamically Determine the width/height of an Image to Maximize the view

Question

Hello, I'm building a photo gallery. The photo gallery consists of images that users upload. These uploads are resized, and can be of any dimension, 100x100, 2500x2500.

My Photo Gallery View page is Fluid, meaning the width of the page is not fixed.

In the Photo Gallery page I display the original Image updated - no resizing ( though I do for other purposes, thumbnails etc)...

What I would like to do, is show the image at the maximum possible dimension to use all the real-estate of the page possible.

Right now I have: max-width: 600px; min-height: 100px; min-width: 100px;

Problem is if I get rid of max-width, then the image overflows off the page.

Any ideas?

Thanks

Answer 1

Sorry , I cant understand what u want exactly but to determine the width of element in jquery

var wid=$('#id').width();

u can change the width of the image dynamically using(assuming you need 100X100)

 var x=100;
 $(#id).css({width:x,height:x});

Answer 2

Giving dimensions of max-width and max-height in percentage might help.