如何在 Javascript 随机图像生成器中居中图像？答案

【问题标题】：How do I center images in a Java Script random image generator?如何在 Javascript 随机图像生成器中居中图像？
【发布时间】：2022-02-09 13:39:47
【问题描述】：

我正在为学校作业制作随机图像生成器，如何使图像居中？我是 java 脚本的新手，想知道如何将生成器制作的图像居中。我尝试了几种不同的方法来使代码居中，但没有找到任何方法。如果有解决方法可以让它居中，那没关系，因为我只需要让它居中。这是代码；

    <html>  
<head>  
<title>Display random images</title>  
<style>  
body {  
margin-top: 30px;  
}  
</style>   
</head>  

<script>  
function displayRandomImages()   
{  
    
   //array of images with image location, height, and width  
   var imageArray = [  
   {   
     //address URL of the image  
     src: "https://i.insider.com/5d8a4d172e22af08c029c929?width=750&format=jpeg&auto=webp",  
     //size for the image to be display on webpage  
     width: "650",  
     height: "500", 
   },   
   {  
     src: "https://static.stacker.com/s3fs-public/styles/slide_desktop/s3/editedWWIIMonopolySPYSCAPE2000xpngv1587097885.PNG",  
     width: "650",  
     height: "500",
     
   },   
   {  
     src: "https://images-na.ssl-images-amazon.com/images/I/71IbpNx-3oL._SL1000_.jpg",  
     width: "650",  
     height: "500", 
   },  
   {  
     src: "https://cdn.vox-cdn.com/thumbor/wj2qaxojsQT3DrUbP78SVW1fpMs=/0x0:1500x1500/1200x800/filters:focal(630x630:870x870)/cdn.vox-cdn.com/uploads/chorus_image/image/65772083/81C985A22GL._SL1500_.0.jpg",  
     width: "650",  
     height: "500", 
    } ];  
      
    //find the length of the array of images  
    var arrayLength = imageArray.length;  
    var newArray = [];  
    for (var i = 0; i < arrayLength; i++) {  
        newArray[i] = new Image();  
        newArray[i].src = imageArray[i].src;  
        newArray[i].width = imageArray[i].width;  
        newArray[i].height = imageArray[i].height;
    }  
     
  // create random image number  
  function getRandomNum(min, max)   
  {  
      // generate and return a random number for the image to be displayed   
      imgNo = Math.floor(Math.random() * (max - min + 1)) + min;  
      return newArray[imgNo];  
  }    
  
  // 0 is first image and (preBuffer.length - 1) is last image of the array  
  var newImage = getRandomNum(0, newArray.length - 1);  
   
  // remove the previous images  
  var images = document.getElementsByTagName('img');  
  var l = images.length;  
  for (var p = 0; p < l; p++) {  
     images[0].parentNode.removeChild(images[0]);  
  }  
  // display the new random image    
  document.body.appendChild(newImage);  
}  

</script>  
  
<body>  
<div>  
<center>  
<h2 style="color:green"> Random Image Generator </h2>  
<h4> Press the button to display and change the image </h4>  
<button onclick="displayRandomImages();"> Display Images </button>  
</center> 


</div>  
</body>  
</html>

【问题讨论】：

标签： javascript html css

【解决方案1】：

<html>  
<head>  
<title>Display random images</title>  
<style>  
body {  
margin-top: 30px;  
}  
img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}
</style>   
</head>  

<script>  
function displayRandomImages()   
{  
    
   //array of images with image location, height, and width  
   var imageArray = [  
   {   
     //address URL of the image  
     src: "https://i.insider.com/5d8a4d172e22af08c029c929?width=750&format=jpeg&auto=webp",  
     //size for the image to be display on webpage  
     width: "650",  
     height: "500", 
   },   
   {  
     src: "https://static.stacker.com/s3fs-public/styles/slide_desktop/s3/editedWWIIMonopolySPYSCAPE2000xpngv1587097885.PNG",  
     width: "650",  
     height: "500",
     
   },   
   {  
     src: "https://images-na.ssl-images-amazon.com/images/I/71IbpNx-3oL._SL1000_.jpg",  
     width: "650",  
     height: "500", 
   },  
   {  
     src: "https://cdn.vox-cdn.com/thumbor/wj2qaxojsQT3DrUbP78SVW1fpMs=/0x0:1500x1500/1200x800/filters:focal(630x630:870x870)/cdn.vox-cdn.com/uploads/chorus_image/image/65772083/81C985A22GL._SL1500_.0.jpg",  
     width: "650",  
     height: "500", 
    } ];  
      
    //find the length of the array of images  
    var arrayLength = imageArray.length;  
    var newArray = [];  
    for (var i = 0; i < arrayLength; i++) {  
        newArray[i] = new Image();  
        newArray[i].src = imageArray[i].src;  
        newArray[i].width = imageArray[i].width;  
        newArray[i].height = imageArray[i].height;
    }  
     
  // create random image number  
  function getRandomNum(min, max)   
  {  
      // generate and return a random number for the image to be displayed   
      imgNo = Math.floor(Math.random() * (max - min + 1)) + min;  
      return newArray[imgNo];  
  }    
  
  // 0 is first image and (preBuffer.length - 1) is last image of the array  
  var newImage = getRandomNum(0, newArray.length - 1);  
   
  // remove the previous images  
  var images = document.getElementsByTagName('img');  
  var l = images.length;  
  for (var p = 0; p < l; p++) {  
     images[0].parentNode.removeChild(images[0]);  
  }  
  // display the new random image    
  document.body.appendChild(newImage);  
}  

</script>  
  
<body>  
<div>  
<center>  
<h2 style="color:green"> Random Image Generator </h2>  
<h4> Press the button to display and change the image </h4>  
<button onclick="displayRandomImages();"> Display Images </button>  
</center> 


</div>  
</body>  
</html>

【讨论】：

只需添加img{}样式，我在style标签中提到

【解决方案2】：

您可以尝试为数组中的每个图像添加一个 img-el 类，然后将其添加到您的脚本中：

img-el{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

另一种选择是将这些属性添加到数组中的每个图像，并在分配宽度、src 等的同一个 for 循环中分配它们。

我不确定您希望它是什么样子，但我也建议您阅读 flex。

【讨论】：

【解决方案3】：

将自定义 CSS 添加到图像以在中间呈现或通过将其引用到 Id 将其添加到中心元素。

//array of images with image location, height, and width   
const imageArray = [  
   {   
     //address URL of the image  
     src: "https://i.insider.com/5d8a4d172e22af08c029c929?width=750&format=jpeg&auto=webp",  
     //size for the image to be display on webpage  
     width: "450",  
     height: "300", 
   },   
   {  
     src: "https://static.stacker.com/s3fs-public/styles/slide_desktop/s3/editedWWIIMonopolySPYSCAPE2000xpngv1587097885.PNG",  
     width: "450",  
     height: "300",
     
   },   
   {  
     src: "https://images-na.ssl-images-amazon.com/images/I/71IbpNx-3oL._SL1000_.jpg",  
     width: "450",  
     height: "300", 
   },  
   {  
     src: "https://cdn.vox-cdn.com/thumbor/wj2qaxojsQT3DrUbP78SVW1fpMs=/0x0:1500x1500/1200x800/filters:focal(630x630:870x870)/cdn.vox-cdn.com/uploads/chorus_image/image/65772083/81C985A22GL._SL1500_.0.jpg",  
     width: "450",  
     height: "300", 
    } 
];  
var arrayLength = imageArray.length;  
var newArray = [];  
for (var i = 0; i < arrayLength; i++) {  
    newArray[i] = new Image();  
    newArray[i].src = imageArray[i].src;  
    newArray[i].width = imageArray[i].width;  
    newArray[i].height = imageArray[i].height;
    newArray[i].className = "center-image";
}  
  
// create random image number  
function getRandomNum(min, max) {  
    // generate and return a random number for the image to be displayed   
    imgNo = Math.floor(Math.random() * (max - min + 1)) + min;  
    return newArray[imgNo];  
}  
    
function displayRandomImages() {    
  // 0 is first image and (preBuffer.length - 1) is last image of the array  
  var newImage = getRandomNum(0, imageArray.length - 1); 
  // remove the previous images  
  var images = document.getElementsByTagName('img');  
  var l = images.length;  
  for (var p = 0; p < l; p++) {  
     images[0].parentNode.removeChild(images[0]);  
  }  
  // display the new random image    
  document.body.appendChild(newImage);  
}

body {
  margin-top: 30px;
}

.center-image {
  display: block;
  margin: 0 auto;
}

<div>  
  <center>  
    <h2 style="color:green"> Random Image Generator </h2>  
    <h4> Press the button to display and change the image </h4>  
    <button onclick="displayRandomImages();"> Display Images </button>  
  </center> 
</div>

【讨论】：

【解决方案4】：

你只需要中心然后就会是这样的：

<html>

<head>
  <title>Display random images</title>
  <style>
    body {
      margin-top: 30px;
    }

    img {
      display: block;
      margin: 50px auto;
    }
  </style>
</head>

<script>
  function displayRandomImages() {

    //array of images with image location, height, and width  
    var imageArray = [{
        //address URL of the image  
        src: "https://i.insider.com/5d8a4d172e22af08c029c929?width=750&format=jpeg&auto=webp",
        //size for the image to be display on webpage  
        width: "650",
        height: "500",
      },
      {
        src: "https://static.stacker.com/s3fs-public/styles/slide_desktop/s3/editedWWIIMonopolySPYSCAPE2000xpngv1587097885.PNG",
        width: "650",
        height: "500",

      },
      {
        src: "https://images-na.ssl-images-amazon.com/images/I/71IbpNx-3oL._SL1000_.jpg",
        width: "650",
        height: "500",
      },
      {
        src: "https://cdn.vox-cdn.com/thumbor/wj2qaxojsQT3DrUbP78SVW1fpMs=/0x0:1500x1500/1200x800/filters:focal(630x630:870x870)/cdn.vox-cdn.com/uploads/chorus_image/image/65772083/81C985A22GL._SL1500_.0.jpg",
        width: "650",
        height: "500",
      }
    ];

    //find the length of the array of images  
    var arrayLength = imageArray.length;
    var newArray = [];
    for (var i = 0; i < arrayLength; i++) {
      newArray[i] = new Image();
      newArray[i].src = imageArray[i].src;
      newArray[i].width = imageArray[i].width;
      newArray[i].height = imageArray[i].height;
    }

    // create random image number  
    function getRandomNum(min, max) {
      // generate and return a random number for the image to be displayed   
      imgNo = Math.floor(Math.random() * (max - min + 1)) + min;
      return newArray[imgNo];
    }

    // 0 is first image and (preBuffer.length - 1) is last image of the array  
    var newImage = getRandomNum(0, newArray.length - 1);

    // remove the previous images  
    var images = document.getElementsByTagName('img');
    var l = images.length;
    for (var p = 0; p < l; p++) {
      images[0].parentNode.removeChild(images[0]);
    }
    // display the new random image    
    document.body.appendChild(newImage);
  }
</script>

<body>
  <div>
    <center>
      <h2 style="color:green"> Random Image Generator </h2>
      <h4> Press the button to display and change the image </h4>
      <button onclick="displayRandomImages();"> Display Images </button>
    </center>


  </div>
</body>

</html>

我只更新了您的 style 块，使用 css for Image。就是这样

【讨论】：