使用javascript更改瀏覽器的背景調整大小

因此，我希望在瀏覽器高度等於瀏覽器寬度的2/3時更改背景大小。這是我嘗試過的代碼，我無法讓它工作。使用javascript更改瀏覽器的背景調整大小

<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; 
}

來源

2016-09-14 Bradon Thomason

所有這些另一種方法是使用媒體查詢（因爲你這樣做是在窗口上），並擺脫的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; 
    } 
}

來源

2016-09-14 21:25:54 k2snowman69

你的JS應該使用backgroundSize，沒有背景大小：

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

來源

2016-09-14 20:39:47

另一種方法，我覺得更容易被使用jQuery。您可以簡單地使用resize（）事件處理程序。下面是一個例子：

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

//在這裏你可以添加你想要的大小調整 }執行代碼）

要然後改變你也可以使用jQuery的.css（）的CSS。

來源

2016-09-14 20:51:54

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

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

來源

2016-09-14 21:02:03 C1234

使用javascript更改瀏覽器的背景調整大小

回答

相關問題