使用data-attribute和javascript将background-size值从contains更改为cover

Question

当屏幕分辨率增加到1900以上（电视分辨率大小）时，我试图将背景大小从包含更改为覆盖。尽管我找不到解决方案。我们已经做了最好的传递值，但无法找到它的答案。我的想法是让data-bgfit =“contains”并使用javascript切换它，并在屏幕分辨率改变时将背景大小从contains更改为cover。

Answer 1

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

.element {
  background-size: contain;
}

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

您需要将.element css类替换为HTML元素使用的任何内容，但就是这样。不需要JavaScript。

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