about
The jQuery "scale" plugin resizes objects to fit inside thier parents while maintaining the aspect ratio. It was written for the TouchScreen project which is being developed at the OSU Open Source Lab.
In the examples below, the green box represents the parent, and the red-bordered image represents the object.
Note: As mentioned below, this plugin DOES NOT work in Internet Explorer.
usage
To use the plugin, simply apply the it to any object, i.e.
Optionally, one may also apply the "center" option, which will center the object horizontally and vertically inside the parent, i.e.
One may also apply the "stretch" option, which will stretch the object to fit inside the parent if the object is smaller than the parent, i.e.
One may also combine these options in any order:
$("#foo").scale("stretch","center")
known issues
This plugin is known to not work correctly in the following browsers:
- Internet Explorer
- Opera
a more thorough demo
In each category, the demo shows what the parent/object combination looks like before (on the left) and after applying the plugin (on the right). Please note that the "center" and "stretch" options are enabled for each demo.
object is the exact same size as the parent
don't do anything
|
|
|
|
object is taller than the parent, but the width is fine
scale the object proportionally to the height of the parent
|
|
|
|
object is wider than the parent, but the height is fine
scale the object proportionally to the width of the parent
|
|
|
|
object is taller and wider than the parent (height is closer to being correct than width)
Scale the object proportionally to the width of the parent
|
|
|
|
object is taller and wider than the parent (width is closer to being correct than height)
scale the object proportionally to the height of the parent
|
|
|
|
object is taller and wider than the parent (both height and width are equally close to being correct)
scale the object proportionally to the width
|
|
|
|
object is shorter and skinnier than the parent (height is closer to being correct than width)
Scale the object proportionally to the height of the parent
|
|
|
|
object is shorter and skinnier than the parent (width is closer to being correct than height)
scale the object proportionally to the width of the parent
|
|
|
|
object is shorter and skinnier than the parent (both height and width are equally close to being correct)
scale the object proportionally to the height
|
|
|
|