This demo expands the image browser pixels to 100% of its parent element's width, and requests an image width adjusted to the device pixel ratio. In cases where this would be useful is for a homepage hero image which should span the width of the display.
This image also sets a max browser pixel width so images do not become too large. While a mobile phone may have a width of 320 browser pixels, a desktop monitor may have a 1200 browser pixel width. In this case we are setting a max width of 640 browser pixels.
Use the data-width-percent attribute to set the width percentage. Note that you do not set the percentage in the 'data-width' attribute because the width and height attributes should always have browser pixel dimensions. Without browser pixel dimensions we'd be unable to scale the image proportionately when adjusting the percentage.
Photo by Michael Gäbler.
