dynamic image resizing with css

[balaclava9]

i very much like this slider.

i'm having trouble with the css though. normally for my images i use a mydiv with absolute positioning and then mydiv img { margin-left: auto; } so that as the user resizes the window the image resizes right before his eyes.

i've had trouble getting this behavior to work well with your slider. eventually i realized i had to pick a fixed image size for the slider to work nicely. now i have javascript read the window size and pick an image height. then your program makes the slides from the items. but then the image stays small as the user increases window size. i would really love dynamic resizing of images in response to window resizing, but i don't know how to do it.

you can see dynamic resizing i mean on my front page http://wilmotkidd.com/

and then if you got to photography > abstracts (only 5 items on that list) you can see the jqslider implementation. and can see how it would be nice to have dynamic resizing there ...

update: i hacked together a little dynamic resizing with a css jquery combo. but i'm not sure it's really the right thing: http://wilmotkidd.com/setslideshow3.php?setid=72157625253748361

[MarcelloDiSimone]

Sorry for answering so late... To answer your question: The slider itself is fully responsive and you shouldn't need to add additional javascript for image scaling. The trick here is to set the CSS for images to:

img {
     width: auto;
     max-width: 100%;
}

With that style applied the image scales with a correct aspect ratio to the available space of its container until it reaches its original size. I've added an example here:

http://marcellodisimone.github.com/jquery.jqslider/examples/images.html

BTW you can find additional help here

http://marcellodisimone.github.com/jquery.jqslider

and an API documentation here:

http://marcellodisimone.github.com/jquery.jqslider/doc

Cheers Marcello