2015-06-30 16:10:22 -04:00
# Contain Element
A JavaScript plugin to contain an element within its parent element.
2015-06-30 17:58:12 -04:00
## Description
2015-07-01 14:05:48 -04:00
The plugin scales an element to the minimum size required for it to be completely contained within its parent, and retains its original aspect ratio by cropping portions that don't fit based on its vertical and horizontal alignment (by default both are set to: `center` ).
2015-06-30 17:58:12 -04:00
2015-07-01 13:41:24 -04:00
[Demo ](http://williamsny.github.io/contain-element/ )
2015-07-01 12:36:07 -04:00
2015-06-30 16:10:22 -04:00
## Features
* Pure JavaScript with no dependencies
* Configures the horizontal and vertical alignment of the contained element
* Can detect the native size or have it specified at runtime
## Usage
2015-06-30 17:47:55 -04:00
```javascript
2015-06-30 16:10:22 -04:00
window.onload = function() {
2015-06-30 17:40:10 -04:00
var contain = new ContainElement({
2015-06-30 16:10:22 -04:00
id: 'element', // the id of the element to be contained
2015-07-03 11:55:36 -04:00
width: '100', // (optional) native element width in pixels (unset: detected element width)
height: '100', // (optional) native element height in pixels (unset: detected element height)
2015-07-01 14:05:48 -04:00
valign: 'top', // (optional) vertical alignment: top|bottom (unset: center)
halign: 'left' // (optional) horizontal alignment: left|right (unset: center)
2015-06-30 16:10:22 -04:00
});
2015-06-30 17:40:10 -04:00
// (example) update the size and positioning on window resize
2015-07-01 11:30:28 -04:00
window.onresize = contain.update;
2015-06-30 17:40:10 -04:00
// (example) update the size and positioning on orientation change
2015-07-02 16:15:27 -04:00
window.addEventListener('orientationchange', contain.update);
2015-06-30 16:10:22 -04:00
};
```
2015-09-04 14:26:56 -04:00
## Functions
* `update()` : Update the size and position of the contained element.
2015-09-08 00:23:16 -04:00
* `setWidth(width)` : Set the width (run `update()` to apply).
* `setHeight(height)` : Set the height (run `update()` to apply).
* `setValign(valign)` : Set the vertical alignment (run `update()` to apply).
* `setHalign(halign)` : Set the horizontal alignment (run `update()` to apply).
* `getWidth()` : Return the current width.
* `getHeight()` : Return the current height.
* `getValign()` : Return the current vertical alignment.
* `getHalign()` : Return the current horizontal alignment.
2015-09-04 14:26:56 -04:00
* `getScale()` : Return the current scale factor being applied to the contained element.
2015-06-30 16:10:22 -04:00
## Credits
Written by [Williams New York ](http://williamsnewyork.com )
### Authors
2015-06-30 16:35:47 -04:00
* [Kevin MacMartin ](https://github.com/prurigro/ )
* [Luke Evers ](https://github.com/lukevers/ )
2015-06-30 16:10:22 -04:00
## LICENSE
Licensed under the [MIT license ](http://opensource.org/licenses/MIT ).