Very fluid Anythingslider and proportional image scaling.

[kim3erg]

Is there an easy way for anythingslider to get the browserwindowsize and then be able to scale images proportionally ? The problem is when browser window is taller than it is wide, anything slider crops my images. How do I work around it? I´ve been searching all over and tried a couple of scripts that didn´t work, maybe because of my iframe layout?

Anyway for demo of problem see http://kimberg.no/jns and make browser window narrow. A solution for this would mean that my layout is 100% fluid and would work on all screens and devices as far as I can see. Many thanks for all patience. -Kim

[Mottie]

Hi kim3erg!

I was messing around with this the other day and it just gets really messy trying to make different sized images scale proportionally. I'll look at it again, but I've been very busy lately with little free time for projects.

If you are pressed for time, check out this demo that centers different sized images inside a fixed slider.

[kim3erg]

Thanks, I´ll check this out and I´ll let you know if and when I have a solution. I think I am really close.

[ghost]

Hi,

1. I set my #slider width: 100% with a fixed height.
2. css: img {max-width:100%; border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
3. Adjust height with media queries.
4. js: There is a also a expand:true option when initialising the anythingSlider js function

The img rules are a general solution for all image scaling.