Atomic Bulldog - UI/pattern library

1.10.1 - Responsive image, Srcset (`img` tag)

Source: atoms/_img-fluid.scss, line 41

Open in new window

If the browser does not support srcset it will fallback to src (IE11) More infos => https://salferrarello.com/responsive-images-srcset/

Can I Use srcset? Data on support for the srcset feature across the major browsers from caniuse.com.

Example:

image description
image description
image description
image description 
<div class="container">
    <img class="img-fluid"
    srcset="http://via.placeholder.com/320x150 320w,
    http://via.placeholder.com/600x281 600w,
    http://via.placeholder.com/900x422 900w,
    http://via.placeholder.com/1200x563 1200w,
    http://via.placeholder.com/1800x844 1800w"
    src="http://via.placeholder.com/320x150?text=Fallback"
    alt="image description">
    <div class="grid has-cols-sm-3">
        <div>
            <img class="img-fluid"
            srcset="http://via.placeholder.com/320x150 320w,
            http://via.placeholder.com/600x281 600w,
            http://via.placeholder.com/900x422 900w,
            http://via.placeholder.com/1200x563 1200w,
            http://via.placeholder.com/1800x844 1800w"
            sizes="(min-width: 600px) 33vw, 100vw"
            src="http://via.placeholder.com/320x150?text=Fallback"
            alt="image description">
        </div>
        <div>
            <img class="img-fluid"
            srcset="http://via.placeholder.com/320x150 320w,
            http://via.placeholder.com/600x281 600w,
            http://via.placeholder.com/900x422 900w,
            http://via.placeholder.com/1200x563 1200w,
            http://via.placeholder.com/1800x844 1800w"
            sizes="(min-width: 600px) 33vw, 100vw"
            src="http://via.placeholder.com/320x150?text=Fallback"
            alt="image description">
        </div>
        <div>
            <img class="img-fluid"
            srcset="http://via.placeholder.com/320x150 320w,
            http://via.placeholder.com/600x281 600w,
            http://via.placeholder.com/900x422 900w,
            http://via.placeholder.com/1200x563 1200w,
            http://via.placeholder.com/1800x844 1800w"
            sizes="(min-width: 600px) 33vw, 100vw"
            src="http://via.placeholder.com/320x150?text=Fallback"
            alt="image description">
        </div>
    </div>
</div>