mirror of
https://github.com/WilliamsNY/contain-element.git
synced 2024-11-08 01:16:40 -05:00
5226ead17d
With CSS background positioning, the word `center` is generally used. This is pretty much that, but for any element.
50 lines
1.7 KiB
Markdown
50 lines
1.7 KiB
Markdown
# Contain Element
|
|
|
|
A JavaScript plugin to contain an element within its parent element.
|
|
|
|
## Description
|
|
|
|
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`).
|
|
|
|
[Demo](http://williamsny.github.io/contain-element/)
|
|
|
|
## 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
|
|
* Includes function to update the size and position
|
|
|
|
## Usage
|
|
|
|
```javascript
|
|
window.onload = function() {
|
|
var contain = new ContainElement({
|
|
id: 'element', // the id of the element to be contained
|
|
width: '100', // (optional) element width in pixels (unset: element width)
|
|
height: '100', // (optional) element height in pixels (unset: element height)
|
|
valign: 'top', // (optional) vertical alignment: top|bottom (unset: center)
|
|
halign: 'left' // (optional) horizontal alignment: left|right (unset: center)
|
|
});
|
|
|
|
// (example) update the size and positioning on window resize
|
|
window.onresize = contain.update;
|
|
|
|
// (example) update the size and positioning on orientation change
|
|
screen.addEventListener('orientationchange', contain.update);
|
|
};
|
|
```
|
|
|
|
## Credits
|
|
|
|
Written by [Williams New York](http://williamsnewyork.com)
|
|
|
|
### Authors
|
|
|
|
* [Kevin MacMartin](https://github.com/prurigro/)
|
|
* [Luke Evers](https://github.com/lukevers/)
|
|
|
|
## LICENSE
|
|
|
|
Licensed under the [MIT license](http://opensource.org/licenses/MIT).
|
|
|