使用 javascript 在浏览器调整大小时更改背景 css

Question

因此，我希望在浏览器高度等于浏览器宽度的 2/3 时更改背景大小。这是我试过的代码，但我无法让它工作。

<body id="body" onresize="BG_resize()">
<script>
    function BG_resize() {
        var w = window.innerWidth;
        var h = window.innerHeight;

        if ((w * (2 / 3)) < h){
            document.getElementById("body").style.background-size = "auto 100%";
        }
    }
</script>
</body>

css:

#body {
    background:url("Layout/BG.jpg");
    background-size:100% auto;
}

Answer 1

您的 JS 应该使用 backgroundSize，而不是 background-size：

document.getElementById("body").style.backgroundSize = "auto 100%";

Answer 2

另一个我觉得更简单的替代方法是使用 jQuery。您可以简单地使用 resize() 事件处理程序。下面是一个例子：

$(window).on('resize', function () {

//在这里你可以添加你想要在调整大小时执行的代码 })

然后更改 css 您还可以使用 jQuery .css().

Answer 3

http://fofwebdesign.co.uk/template/_...tio-resize.htm

.target-ratio-resize {
 max-width: 960px; /* actual img width */
 max-height: 150px; /* actual img height */
 *height: 150px; /* actual img height - IE7 */
 background-image: url(students.jpg);
 background-size: cover;
 background-position: center;
}
.target-ratio-resize:after {
 content: " ";
 display: block; 
 width: 100%; 
 padding-top: 66.666%; /* 2:3 ratio */
}

Answer 4

所有这些的另一种替代方法是使用媒体查询（因为您在 window 上执行此操作）并一起摆脱 javascript。这将运行更流畅，因为浏览器会为您完成大部分工作。

看起来您要查找的查询是纵横比，例如：

@media screen and (min-aspect-ratio: 2/3) 
{
   body {
      background-size: auto 100%;
   }
}
@media screen and (max-aspect-ratio: 2/3) 
{
   body {
      background-size: 100% auto;
   }
}

使用 javascript 在浏览器调整大小时更改背景 css

Use javascript to change background css on browser resize

html

javascript

css

background-image

background-size