<!-- Defining the width of the image being referenced with the w descriptor --> <img src="https://placehold.it/100x100" srcset="https://placehold.it/100x100 100w, https://placehold.it/200x100 200w, https://placehold.it/300x100 300w" alt="My FPO img" /> <img src="https://placehold.it/600x100" srcset="https://placehold.it/600x100 600w, https://placehold.it/1200x100 1200w, https://placehold.it/1800x100 1800w" alt="My FPO img" /> <img src="https://placehold.it/2000x100" srcset="https://placehold.it/2000x100 2000w, https://placehold.it/4000x100 4000w, https://placehold.it/6000x100 6000w" alt="My FPO img" /> <!-- Defining device-pixel ratio with the x descriptor --> <!-- Example does not flex with browser resize --> <img src="https://placehold.it/600x100" srcset="https://placehold.it/600x100 1x, https://placehold.it/1200x200 2x, https://placehold.it/1800x300 3x" alt="My FPO img" /> <!-- With the responsive-image class, the following example does flex with browser resize --> <img class="responsive-img" src="https://placehold.it/600x100" srcset="https://placehold.it/600x100 1x, https://placehold.it/1200x200 2x, https://placehold.it/1800x300 3x" alt="My FPO img" />
.responsive-img { max-width: 100%; height: auto; width: 100%; }