如何声明图像 srcset 使其不考虑视网膜屏幕答案

【问题标题】：How to declare image srcset so that it doesn't consider retina screen如何声明图像 srcset 使其不考虑视网膜屏幕
【发布时间】：2018-09-20 14:49:13
【问题描述】：

我根据宽度使用不同的 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"/>

问题在于，对于手机 (

我希望显示的图像取决于屏幕的实际宽度，这意味着对于宽度为 380 像素的非视网膜屏幕设备显示的图像与为宽度为 380 像素的视网膜屏幕设备显示的图像相同。我需要使用图像标签和 srcset 来执行此操作，我无法使用带有 img-background 和媒体查询的 div 来执行此操作。

【问题讨论】：

@dippas 这不是同一个问题，看看编辑上的大写字母。

标签： html image srcset

【解决方案1】：

这可以通过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中选择最合适的图像源。

【讨论】：