html - 使用 data-src (lazysizes) 将背景图像从 css 移动到 html 并正确使用样式

Question

我的 CSS 文件中有非常重的背景图片。出于这个原因，我想使用 Lazysizes 加载它们，它会在您在我的网站上滚动时加载内容。

My github hosted page

要启用滚动加载，图像需要使用类 lazyload 和 data-src 位于 HTML 中。这对我网站上的所有 Assets 都非常有效，但我的 CSS 中有一些背景图像，我试图将其移至 HTML，但我无法按照背景当前的方式设置样式和外观和工作方式。

我没有在网站上编写整个 CSS，我坚持要让当前的背景图像与现在完全一样，但让我有可能只在 HTML 中引用图像。

我的尝试导致图像被拉伸(stretch)或不会使用断点，因为所有当前背景都可以使用，或者背景会在页面中间形成一个正方形。

所以对我来说挑战不是实际的 HTML，也不是使用 lazysizes 加载它。挑战在于让 CSS 正常工作。下面附有带有我要更改的背景的 HTML 元素:

<section class="proj">
      <hgroup>
        <h2>Socialmist</h2>
        <h6>Instagram with music from SoundCloud</h6>
      </hgroup>
      <div class="mw by full">
        <img class="wide">
      </div>
    </section>

感谢您抽出宝贵时间，非常感谢!

Answer 1

成功了。下面附上代码。

.yay {
  max-height          : 550px;
  background-repeat   : no-repeat;
  background-position : center;
  object-fit          : cover;
}

    <section class="proj">
      <hgroup>
        <h2>Placeholder</h2>
        <h6>Placeholder</h6>
      </hgroup>
      <div>
        <img class="wide lazyload yay" data-src="img/sm/bg/7T5C5861-s.jpg"/>
      </div>
    </section>