具有 srcset 和延迟加载的全宽响应式背景图像

Question

我正在开发一个网站，该网站的主页上有一系列“英雄”面板，其中的文字覆盖在大背景图片上。

理想情况下，我希望将内联图像与srcset 和sizes 一起使用，这样浏览器就可以根据屏幕尺寸选择最合适的图像，而不是仅仅将尽可能大的图像作为background-image 和然后将其缩小以适应较小的屏幕。

到目前为止，我的标记看起来像：

<img 
  src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" 
  srcset="/img/trekking_320.jpg 320w,
          /img/trekking_480.jpg 480w,
          /img/trekking_600.jpg 600w,
          /img/trekking_768.jpg 768w,
          /img/trekking_960.jpg 960w" 
  data-sizes="100vw"
  class="lazyload"
>

和 CSS：

img {
  position: absolute;
  height: 100%; width: auto;
}

和overflow:hidden 在容器上。

图像的高度是 320px 到 768px，然后是 480px 到 960px，然后是 600px 的最大高度。

我创建了一个Codepen 来说明问题。在所有不同屏幕尺寸（手机、平板电脑、笔记本电脑）的视网膜屏幕上一切正常，在普通 dpi 屏幕上，宽度达到 768 像素也很好，但之后图像不会填满屏幕。

那么有可能做到我在标题中提出的所有事情吗？我是在正确的轨道上还是需要采取完全不同的方法？

Answer 1

不要滥用 <img /> 作为背景图像 - 使用 CSS background-image（使用 background-size: cover 或 fill 以获得“响应式”外观），但使用 image-set 函数为不同的设备显示指定不同的图像决议：

• Is there a srcset equivalent for css background image
• https://drafts.csswg.org/css-images-3/#image-set-notation

尽管截至 2017 年 6 月，image-set 不支持 Firefox/Gecko、Internet Explorer 或 Edge - 仅基于 WebKit 的浏览器（Chrome、Safari、Opera）：http://caniuse.com/css-image-set/embed

body {
    background-image: -webkit-image-set(
        url('path/to/image') 1x,
        url('path/to/high-res-image') 2x,
        etc...
    );
    background-size: cover;
}