<img class="my-image" data-range="320-1120" data-step-size="80" />
Passing a range automatically generates a list of widths (compared to the hardcoded list with parameter widths in demo 1). Optional parameter step-size (default 160) is used to calculate the number of size steps between the range min and max values.
The demo on this page generates new images using a canvas, simulating server generated images.
Parameter ratio is passed to calculate the new image height. In the demo the received height is used to crop the generated image:
<img class="my-image" data-range="320-1120" data-step-size="80" data-ratio="3" />