jQuery Responsive Image Examples

MinWidth based on Viewport

MinWidth based on Container


These images support 5 different states. The only difference is the width calculation.
The left image is based on the windows viewport, the right is based on its surrounding <figure> tag.
Breakpoints start from 0px to 399px, 400px to 599px, 600px to 799px, 800px to 999px and large image above 1000px.

This code is used for both images. Only the data-container attribute is set for the right image.

<span class="picture" data-container="figure" data-alt="foo" data-title="bar" data-class="img-responsive">
    <span data-src="400x200.jpg"></span>
    <span data-src="600x300.jpg" data-min-width="400"></span>
    <span data-src="800x400.jpg" data-min-width="600"></span>
    <span data-src="1000x500.jpg" data-min-width="800"></span>
    <span data-src="1200x600.jpg" data-min-width="1000"></span>
</span>