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

Question

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

理想情况下，我想使用内联图像srcset，sizes这样浏览器就可以根据屏幕尺寸选择最合适的图像，而不是仅仅将尽可能大的图像作为 a 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在容器上。

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

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

那么我在标题中要求的所有事情都可以做吗？我走在正确的道路上还是需要采取完全不同的方法？

Answer 1

不要滥用<img />背景图像 - 使用CSS background-image（带有background-size: cover或fill用于“响应式”外观），但使用该image-set函数为不同的设备显示分辨率指定不同的图像：

• 是否有 srcset 相当于 css 背景图像
• https://drafts.c​​sswg.org/css-images-3/#image-set-notation

截至 2017 年 6 月，image-setFirefox/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;
}