srcset:为视网膜桌面定义文件 [英] 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"
>

对于台式机设备，我使用小拇指(270x190).对于移动设备，我使用大拇指(690x486).但是如何为使用中等拇指(540x380)的视网膜桌面创建规则?

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)?

推荐答案

您无需指定540x380图片必须在视网膜上使用，如果您仅将该图片添加到srcset中，则浏览器应该足够聪明弄清楚何时使用它:

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"
>

有一个关于此的好帖子也是如此.

这篇关于srcset:为视网膜桌面定义文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！