不同的屏幕尺寸有不同的背景图像

Question

我试图为不同的屏幕尺寸提供不同的背景图像。背景图像应该完全可见。我尝试了此解决方案，在此处输入链接描述，但没有成功。首先，如何为不同的屏幕尺寸赋予高度属性，以及适用于手机屏幕、平板电脑屏幕和桌面屏幕的图像尺寸是什么。

.miracle {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat; 
  background-size: cover;
  background-image: url(https://i.postimg.cc/Y0sWXBXs/Anti-Aging-1280x712.jpg);
}

/*--For mobile devices--*/
@media (max-width: 480px) {
    .miracle {
        background-image: url(https://i.postimg.cc/T3Wr4hvq/Anti-Aging-768x600.jpg);
    }
}

/*-----For tablets: ---------------*/
@media (min-width: 481px) and (max-width: 1024px) {
    .miracle {
        background-image: url(https://i.postimg.cc/T3Wr4hvq/Anti-Aging-768x600.jpg);
    }
}

/*-----For desktop devices ------*/
@media (min-width: 1025px) {
    .miracle {
        background-image: url(https://i.postimg.cc/Y0sWXBXs/Anti-Aging-1280x712.jpg);
   }
}

<div class="miracle"></div>

Answer 1

对于 2020 年写的文章来说，这种方法在某些方面没有意义。并不是想说作者的坏话，但事情就是这样。

1. 你应该首先考虑移动设备，所以你的第一个background-image应该是移动设备，所以你的第一个媒体查询应该是下一个尺寸，依此类推，

示例：请记住第一个是移动设备

.miracle {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url();
}

/* next size - tablet */
@media (min-width: 768px) {
  .miracle {
    background-image: url();
  }
}

/* next size - tablet landscape and it covers desktop */
@media (min-width: 1024px) {
  .miracle {
    background-image: url();
  }
}

/* next size - larger desktops */
@media (min-width: 1280px) {
  .miracle {
    background-image: url();
  }
}

至于高度，取决于miracle您的主容器还是它有一个控制高度的父容器。如果它是您的主要内容，您可以向 .miracle 添加高度，这里有两个例子。

.miracle {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url();
  height: 280px;
}

/* next size - tablet */
@media (min-width: 768px) {
  .miracle {
    background-image: url();
    height: 380px;
  }
}

object-fit在图像标签上使用而不是background-image. 这样，您就可以利用图像标签的优势获得与背景图像相同的效果。我的示例还利用了srcset您可以设置断点所需的所有图像的优势，浏览器将处理它。浏览器对 的支持object-fit非常好，当然 IE 是问题所在，如果您需要对此的支持，不用担心我的示例有可以处理该问题的 polyfill（javascript）。

.miracle {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url();
}

/* next size - tablet */
@media (min-width: 768px) {
  .miracle {
    background-image: url();
  }
}

/* next size - tablet landscape and it covers desktop */
@media (min-width: 1024px) {
  .miracle {
    background-image: url();
  }
}

/* next size - larger desktops */
@media (min-width: 1280px) {
  .miracle {
    background-image: url();
  }
}

.miracle {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url();
  height: 280px;
}

/* next size - tablet */
@media (min-width: 768px) {
  .miracle {
    background-image: url();
    height: 380px;
  }
}

if ("objectFit" in document.documentElement.style === false) {
    const images = document.querySelectorAll(".background-images");

    for (let image of images) {
        const parent = image.closest();
        const objectFitType = getComputedStyle(image).objectFit;

        if (parent !== null) {
            parent.style.backgroundImage = `url(${image.src})`;
            parent.style.backgroundSize = objectFitType;
            parent.classList.add("no-object-fit");
        }
    }
}

3.
3.a：srcset在图像上使用，链接
3.b：使用picture，链接