javascript - HTML 响应式 css 不适用于随机图像

Question

原始模板只使用固定图像并使其响应不同的屏幕分辨率:

   <div class="bg-img" style="background-image: url('./img/background1.jpg');">
   <div class="overlay"></div>
   </div>

现在，我添加了一个随机图像并尝试使响应式的类/样式在此处起作用，但它不起作用。

   <header id="home">

   <div class="bg-img" style="background-image">
   <div id="banner-load"></div>

<script type='text/javascript'
   src='https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js'> 
   </script>

   <script>
   var images = ['background11.jpg', 'background12.jpg', 'background13.jpg', 
   'background14.jpg', 
   'background15.jpg'];

    $('<img class="fade-in, bg-img" style="background-image" src="img/' + 
    images[Math.floor(Math.random() * images.length)] + '">').appendTo('#banner- 
    load');
    </script>

    <div class="overlay"></div>
    </div>

我做错了什么？可能是 class="bg-img"style="background-image"无法识别随机图像？如果有，如何解决？

更新

我正在尝试其他方法，使用 div 作为背景获取原始代码，并使其可编程:

$("<div class='bg-img' style="background-image: url('img/" + images[Math.floor(Math.random() * images.length)] + ");'>")

但我仍然无法让它工作。出了点问题，我得到一个错误

--> Uncaught SyntaxError: missing ) after argument list

Answer 1

<header id="home">
   <div class="bg-img" style="height:100%;width:100%;background-image:none;background-size:cover;">
   <div id="banner-load"></div>
	<script type='text/javascript'
   src='https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js'> 
   </script>
   <script>
   var images = ['background11.jpg', 'background12.jpg', 'background13.jpg', 
   'background14.jpg', 'background15.jpg'];
   function getRandomImage() {
   	  return 'img/'+images[Math.floor(Math.random() * images.length)];
   }
   function setRandomImage() {
   	   $('.bg-img').css('backgroundImage', 'url('+getRandomImage()+')');
   }
   $(function(){
   	setRandomImage();
   });
    </script>
    <div class="overlay"></div>
    </div>

通常我会使用 img 而不是 div 来显示图像。我必须为 div 设置宽度和高度，因为它里面什么都没有。这可以是 100px 或响应式 - 我使用 100%(填充当前 View )。

我使用了 background-size:cover 以便图像填充 div，无论它是什么尺寸。