Используйте javascript для изменения фона css при изменении браузера

Итак, я хочу, чтобы размер фона изменялся, когда высота браузера равна 2/3 ширины браузера. Вот код, который я пробовал, и я не могу заставить его работать.Используйте javascript для изменения фона css при изменении браузера

<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() {

// Здесь вы можете добавить свой код, который вы хотите выполнить на изменение размера })

Чтобы затем изменить CSS вы можете использовать JQuery .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 для изменения фона css при изменении браузера

ответ

Смежные вопросы