Question

我已经搜索了并且无法找到我的问题的答案。我正在尝试创建的页面上旋转背景图像。我能够创建使图像每5秒钟更改一次的功能，但是它们显示得非常放大。我希望它适合页面并具有响应能力。我尝试过使用CSS进行调整，但是它将被覆盖并且没有图像显示出来。我看到人们使用HTML画布。

我已包含我正在使用的javascript，css和html。

先谢谢了。

var images = [
    "/images/bar.jpg",
    "/images/bw.jpg",
    "/images/pilsner.jpg",
    "/images/pour.jpg",
    "/images/scene.jpg",
    "/images/scene.jpg",
    "/images/toast.jpg",
  ]
  
  var background = document.getElementById("background");
  var i = 0;
  
  setInterval(function() {
        background.style.backgroundImage = "url(" + images[i] + ")";
        i = i + 1;
        if (i == images.length) {
            i =  0;
        } 
  }, 3000);

.background{
    background-size: cover; 
}



#header{
    background-color: transparent !important;
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/custom.css">
    <title>Wheres my ?</title>
  </head>
<body id="background">
    <script src="index.js"></script>

    <!-- Image and text -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark" id="header">
        <div class="navbar-brand" href="#"> Dude, where's my beer?</div>
        <span class="navbar-text">
           Helping you find your favorite beers.
        </span>
    </nav>
   
    
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>    
</body>
</html>

如何使用也与setInterval一起使用的javascript调整图像大小

0 个答案: