如何声明图像srcset，以便它不考虑视网膜屏幕

Posted 2021-03-27

我根据宽度使用不同的img srcset。这是我的代码：

<img id="portadaImg" class="img-fluid"
                 srcset="images/portada/portada-xl.jpg 2400w,
                         images/portada/portada-l.jpg 1200w,
                         images/portada/portada-md.jpg 992w,
                         images/portada/portada-tablet.jpg 768w,
                         images/portada/portada-mobile.jpg 458w"
                 src="images/portada/portada-mobile.jpg"
                 alt="Foto de portada"/>

问题是，对于手机（<480w），我的图像与其他设备的图像不同（它的高度大于宽度）。它适用于没有视网膜屏幕的手机，但对于那些宽度为2倍的原始宽度，srcset认为它更适合992w图像，不应该加载到手机上。我想知道是否有办法声明srcset总是将458w图像用于该宽度以下的设备，无论它们是否有视网膜屏幕，只是参加设备的真实宽度调整。

我希望显示的图像取决于屏幕的实际宽度，这意味着为宽度为380px的非视网膜屏幕设备显示的图像与宽度为380px的视网膜屏幕设备显示的图像相同。我需要使用image tag和srcset来做这个，我不能用带有img-background和媒体查询的div来做。

答案

这可以通过sizes的兄弟属性srcset实现：

<img id="portadaImg" class="img-fluid"
                 srcset="images/portada/portada-xl.jpg 2400w,
                         images/portada/portada-l.jpg 1200w,
                         images/portada/portada-md.jpg 992w,
                         images/portada/portada-tablet.jpg 768w,
                         images/portada/portada-mobile.jpg 458w"
                 sizes="(max-width: 480px) 480px
                        (max-width: 768px) 768px
                        (max-width: 992px) 992px
                        (max-width: 1400px) 1400px
                        2400px"
                 src="images/portada/portada-mobile.jpg"
                 alt="Foto de portada"/>

更多信息可用at MDN。简而言之，它将检查sizes中第一个匹配的媒体查询中指定的大小，并将从srcset中选择最合适的图像源。