Responsive images



  • So, this works. Dragging the window lower than 800px changes to image 1x:

      <picture>
            <source media="(max-width: 799px)" srcset="https://cdn.quasar.dev/img/image-1x.png">
            <source media="(min-width: 800px)" srcset="https://cdn.quasar.dev/img/image-2x.png">
            <img src="https://cdn.quasar.dev/img/image-src.png" style="height: 255px">
          </picture>
    

    but this from docs won’t work:

    <q-img
            src="https://cdn.quasar.dev/img/image-src.png"
            srcset="https://cdn.quasar.dev/img/image-1x.png 799w,
                    https://cdn.quasar.dev/img/image-2x.png 800w"
            sizes="(max-width: 799px) 799w,
                  (min-width: 800px) 800w"
            style="height: 255px"
          >
            <div class="absolute-bottom text-body1 text-center">
              With srcset & sizes
            </div>
          </q-img>
    

    what am i doing wrong?


Log in to reply