srcset: define a file to retina desktop

问题

This is how my image tag look like:

<img 
    src="img/thumb-teste-270x190.jpg" alt="usro" 
    sizes="(max-width: 20em) 100vw, 
           (min-width: 50em) 10vw"
    srcset="img/thumb-teste-270x190.jpg 270w,
            img/thumb-teste-690x486.jpg 690w"
>

For desktop device, I use a small thumb (270x190). For mobile devices, I use the big thumb (690x486). But how can I create a rule for retina desktop use a medium thumb (540x380)?

回答1:

You don't need to specify that the 540x380 image must be used on retina, if you just add that image into srcset the browser should be smart enough to figure out when to use it:

<img 
   src="img/thumb-teste-270x190.jpg" alt="usro" 
   sizes="(max-width: 20em) 100vw, 
          (min-width: 50em) 10vw"
   srcset="img/thumb-teste-270x190.jpg 270w,
           img/thumb-teste-540x380.jpg 540w,
           img/thumb-teste-690x486.jpg 690w"
>

There's a good post on this as well.

来源：https://stackoverflow.com/questions/29682455/srcset-define-a-file-to-retina-desktop