javascript - 使用数据属性和 javascript 将背景大小值从包含更改为覆盖

Question

当屏幕分辨率增加到 1900(电视分辨率大小)以上时，我试图将背景大小从包含更改为覆盖。虽然我找不到解决方案。我们已经做了 upto like passing the value 但找不到答案。我的想法是让 data-bgfit="contain"并使用 javascript 切换它，并在屏幕分辨率更改时将背景大小从包含更改为覆盖。

Answer 1

使用媒体查询根据浏览器窗口大小设置属性，如下所示:

.element {
  background-size: contain;
}

@media (min-width: 1900px) {
  .element {
    background-size: cover;
  }
}

您需要用您的 HTML 元素使用的任何内容替换 .element css 类，仅此而已。无需 JavaScript。

如果您想根据计算机显示器的分辨率更改属性，您可以在特殊的 JavaScript 对象 window.screen 中找到这些值。问题是，没有任何通知或事件可供您监听以确定用户何时更改显示器分辨率。您可以编写一个脚本来每隔一段时间轮询一次屏幕分辨率，但这是一个糟糕的主意，除非您特别询问我，否则我不会费心向您展示如何操作。