This AnythingSlider (with options: expand : true)
will be eager and fill up the wrapper (the surronding div).
So the content will scale incorrectly...
Styling:
#wrapper3 { width: 75%; height: 500px; margin: 0 auto; border: solid red; }
This AnythingSlider
(with options: expand : true, aspectRatio : true)
will scale according to a calculated value for the aspect ratio.
N.B. the "base"-dimensions, to calculate the aspect ratio from,
must be explicitly given by
e.g. css: #slider4 { width: 680px; height: 317px; }.
In this case there will be space over in the height
dimension if the window is kept small enough.
Styling:
#wrapper4 { width: 75%; height: 500px; margin: 0 auto; border: solid green; }
This AnythingSlider
(with options: expand : true, aspectRatio : '680:317')
will scale according to a calculated value from the aspect ratio.
So the string '660:317' is parsed and calculated to a float =
680/317.
In this case there will be space over in the height
dimension if the window is kept small enough.
Styling:
#wrapper5 { width: 75%; height: 500px; margin: 0 auto; border: solid green; }
This AnythingSlider
(with options: expand : true, aspectRatio : 680/317)
will scale according to the given float (680/317).
In this case there will be space over in the height
dimension if the window is kept small enough.
Styling:
#wrapper6 { width: 75%; height: 500px; margin: 0 auto; border: solid green; }
This AnythingSlider
(with options: expand : true, aspectRatio : 1.5)
will scale according to the given float (1.5).
In this case there will be space over in the width
dimension if the window is kept wide enough.
Styling:
#wrapper7 { width: 75%; height: 200px; margin: 0 auto; border: solid green; }
This AnythingSlider
(with options:
expand : true, aspectRatio : 1.5, showMultiple : 2
)
will scale according to the given float (1.5) X showMultiple
(1.5*2=3).
In this case there will be space over in the width
dimension if the window is kept wide enough.
Styling:
#wrapper8 { width: 75%; height: 200px; margin: 0 auto; border: solid green; }