Dynamically Resized Responsive Image

This demo expands the image browser pixels to 100% of its parent element's width, and requests an image scale to the device pixel ratio and available width. In cases where this would be useful is for a homepage hero image which should span the width of the display. This example uses URI templates to request image dimensions scaled for the device the device. Using percentages works best with server-resized images.

This image also has 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 so it cannot become too large

This example uses internal CSS within the head element to apply a width of 100% and a max-width of 1024px to the image. 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.

If you adjust the width of the page you'll see that the image will scale according to its available area within its parent element (and maxes out at 1024px, which is set within the CSS).

Photo by John T. Daniels