Using breakpoints in the <picture> element

Note: this sample uses the picturefill polyfill to provide backwards compatibility for browsers that do not support the <picture> element.

Viewport widths 0 to 499px:

• the image is 100% of the viewport width

Viewport widths 500px to 599px:

• the image is 50% of the viewport width

Viewport widths 600px and over:

• the image is 25% of the viewport width