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屏幕上，它可以很好地达到768px宽，但之后图像不会填满屏幕。

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

Answer 1

不要滥用<img />用于背景图片 - 使用CSS background-image（background-size: cover或fill表示“响应”外观）但请使用{{1} }功能为不同的设备显示分辨率指定不同的图像：

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

image-set

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

1 个答案: