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

我正在制作一个网站，该网站上有一系列“英雄”面板沿着大型背景图像上覆盖有文本的主页。带有srcset和延迟加载的全宽响应背景图像

理想我想使用内嵌图像与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宽，但之后，图像不会填满屏幕。

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

来源

2017-06-09 Tyssen

不要为背景图像滥用<img /> - 使用CSS background-image（与background-size: cover或fill一个“响应”的样子），但使用image-set功能，为不同设备的显示分辨率指定不同的图片：

虽然截至6月2017，image-set不Firef支持牛/壁虎，Internet Explorer或边缘 - 只是基于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; 
}

来源

2017-06-09 09:07:59 Dai

我真的东西，我今天可以使用后，它似乎'图像set'只支持x描述符。 – Tyssen

@Tyssen我不知道你为什么要为不同的屏幕尺寸制作图像 - 这似乎是浪费精力。如果图像中有文字（例如），则应使用CSS定位而不是在图像中。 CSS和响应式设计的重点在于防止为不同的设备配置文件制作特定的新资产 - srcset/image-set功能用于显示分辨率的有意义的差异（“分辨率”意味着DPI，而不是像素尺寸）。 – Dai

@Tyssen如果你真的想要走这条路，你可以用一个简单的JavaScript来完成这个目标，在页面完成加载之前执行一个简单的JavaScript，在'body'元素上设置一个'class'属性来指示应该使用哪个背景图片，例如'.vw320 {background-image：“320.png”; }' – Dai

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

回答

相关问题