TUX Autoscale component

Autoscale element to fill a container.

Usage

HTML Markup:

<div class="with-Autoscale">
    <img data-autoscale src="//lorempixel.com/1600/1200/cats/">
</div>

The only requirement for styling is that the parent element has the class with-Autoscale or the following styles.

.with-Autoscale {
  overflow: hidden;
  position: relative;
}

Options can be passed via JavaScript.

Name	Type	Default	Description
autoscale	string	cover	Two modes: `cover` and `contain`. This option can be past to the initializing data attribute: `data-autoscale="contain"`.
ratio	number	undefined	Set a predefined ratio.
height	number	undefined	Set a fixed height.
width	number	undefined	Set a fixed width.

You have to supply both width and height if you want to set an initial size. This makes images render in correct size while they are loading.