更改每隔几秒更改一次的图像显示的图像大小

Question

干杯，我有这段图像显示代码，每隔几秒就会改变一次，但我不知道如何调整每个图像的大小，或者如何使它们完全相同。

<!DOCTYPE html>

<html>
   <head>
      <title>change picture</title>
      <script type = "text/javascript">
          function displayNextImage() {
              x = (x === images.length - 1) ? 0 : x + 1;
              document.getElementById("img").src = images[x];
          }

          function displayPreviousImage() {
              x = (x <= 0) ? images.length - 1 : x - 1;
              document.getElementById("img").src = images[x];
          }

          function startTimer() {
              setInterval(displayNextImage, 3000);
          }

          var images = [], x = -1;
          images[0] = "image1.jpg";
          images[1] = "image2.jpg";
          images[2] = "image3.jpg";
      </script>
   </head>

   <body onload = "startTimer()">
       <img id="img" src="startpicture.jpg"/>
       <button type="button" onclick="displayPreviousImage()">Previous</button>
       <button type="button" onclick="displayNextImage()">Next</button>
   </body>
</html>

提前致谢！

Answer 1

可以用css来完成。将图像包裹在 div 中，设置它的尺寸并决定如何显示图像。

如果您想拉伸图像以适合 div，则将图像的 width 和 height 都设置为 100%

#img-box {
  width: 400px;
  height: 400px;
  border: 1px solid black;
 
}
#img-box img {
  max-width: 100%;
  max-height: 100%;
   
}

<!DOCTYPE html>

<html>

<head>
  <title>change picture</title>
  <script type="text/javascript">
    function displayNextImage() {
      x = (x === images.length - 1) ? 0 : x + 1;
      document.getElementById("img").src = images[x];
    }

    function displayPreviousImage() {
      x = (x <= 0) ? images.length - 1 : x - 1;
      document.getElementById("img").src = images[x];
    }

    function startTimer() {
      setInterval(displayNextImage, 3000);
    }

    var images = [],
      x = -1;
    images[0] = "https://upload.wikimedia.org/wikipedia/commons/a/a9/Bristol_MMB_%C2%AB42_River_Avon.jpg";
    images[1] = "https://upload.wikimedia.org/wikipedia/commons/1/19/Finsternis_Natur.jpg";
    images[2] = "https://upload.wikimedia.org/wikipedia/commons/8/8c/Black_CL.png";
  </script>
</head>

<body onload="startTimer()">
  <div id="img-box">
    <img id="img" src="https://upload.wikimedia.org/wikipedia/commons/0/03/Electricsheep-29142.jpg" />
  </div>
  <button type="button" onclick="displayPreviousImage()">Previous</button>
  <button type="button" onclick="displayNextImage()">Next</button>
</body>

</html>

更改每隔几秒更改一次的图像显示的图像大小

Changing the image size on image display that changes every few seconds

html

size

image

timed