landscape-fit

Fit an element to specific dimensions, rotated according to the aspect ratio to maintain a fake "orientation lock".

Similar to canvas-fit, but doesn't handle canvas scaling for HiDPI displays.

Usage

resize = fit(element[, parent])

Creates a resize function for your element. Calling this function will resize the element to fit its parent.

Here's a simple example to make your canvas update its dimensions when resizing the window:

var fit = require('landscape-fit')
var element = document.createElement('div')
 
window.addEventListener('resize', fit(element), false)

You might want to override the parent element that the canvas should be fitting within: in which case, pass that element in as your second argument:

window.addEventListener('resize', fit(element, window), false)

You can also pass your own dimensions via a callback like so:

window.addEventListener('resize', fit(element, function (dims) {
  dims[0] = 100
  dims[1] = 200
}), false)

resize.parent = <DOMElement>

Dynamically change the element's parent element. Note that you still need to manually trigger a resize after doing this.

resize.parent = () => [width, height]

Instead of filling a given element, explicitly set its width and height. Note that you still need to manually trigger a resize after doing this.

License

MIT, see LICENSE.md for details.