javascriptを使用してブラウザの背景サイズを変更するresize

ブラウザの高さがブラウザの幅の2/3に等しい場合、背景サイズを変更します。私が試したコードはここにありますが、それを動作させることはできません。javascriptを使用してブラウザの背景サイズを変更するresize

<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：

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

出典

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、ないバックグラウンド・サイズを使用する必要があります。単にresize（）イベントハンドラを使うことができます。ここで

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

//あなたが

が、あなたはまた、jQueryのの.css（）を使用することができ、CSSを変更するには、サイズ変更 }上で実行したいあなたのコード）を追加することができます。以下は一例です。

出典

2016-09-14 20:39:47

私は簡単にはjQueryのを使用している見つける別の方法：

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

出典

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を使用してブラウザの背景サイズを変更するresize

答えて

関連する問題