带有 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

。

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

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

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

Answer 1

不要滥用

<img />

作为背景图像 - 使用 CSS

background-image

（使用

background-size: cover

或

fill

实现“响应式”外观），但使用

image-set

函数为不同的设备显示分辨率指定不同的图像：

• 是否有 srcset 相当于 css 背景图片
• 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 /嵌入

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

Answer 2

我自己一直在努力解决这个问题，并惊讶地发现，到 2024 年，仍然没有简单的方法来为较小的屏幕提供较小的背景图像。背景

image-set

属性绝对是朝着正确方向迈出的一步，但由于它仅限于

x

像素密度描述符，并且缺乏对屏幕宽度的任何了解（如提供的

<img>

srcset

w

描述符），当您想为较小（并且可能是较慢）设备提供较小图像时，它是没有用的。也不可能在元素的

style

属性中使用内联媒体查询。使用绝对定位的

<img>

或

<picture>

来提供背景图像既笨拙又老套，并且使得覆盖可以双向拉伸的盒子变得更加困难。我能想到的最好办法是生成一个

<style>

块，与我想要提供背景的

<header>

一起使用（Ruby/Rails 中的代码）：

def banner_background(page, widths=[1200,800], switch=900, ratio=2.33)
    banner = page.images.banner.first
    style = ""
    if banner.present?
        style += "article > header {"
        style += "background-image: url(\"#{url_for(banner.image_file.variant(resize_to_fill: [widths[0], widths[0]/ratio]))}\");"
        style += "} @media (max-width: #{switch}px) { article > header {"
        style += "background-image: url(\"#{url_for(banner.image_file.variant(resize_to_fill: [widths[1], widths[1]/ratio]))}\");"
        style += "}}"
    end
    style.html_safe
end

<style><%= banner_background(page) %></style>
<header>
...

这感觉非常混乱，但它比所有其他选项有一个主要优势：它有效，并且它将我的标题背景的下载大小减少了一半 - 每个图像节省了大约 60 kB。

image-set

对

w

和

h

的支持已计划，但在广泛采用之前，我们会遇到这样的黑客攻击。当然，除非有人有更好的建议 - 我非常想听听！