通过Javascript为图像随机设置宽度和高度答案

【问题标题】：Set width and height for image random by Javascript通过Javascript为图像随机设置宽度和高度
【发布时间】：2020-06-18 07:02:32
【问题描述】：

对我来说很难理解的是，如何在随机图像显示时设置它们的宽度和高度。谁能帮帮我？

这是我的代码

    function randomImage(){
        var imagesArray = ['images/person1.jpg', 'images/person2.jpg', 'images/person3.jpg'];
        var num = Math.floor(Math.random() * 3);
        document.canvas.src = imagesArray[num];
    }

<!DOCTYPE html>
    <html lang="en">
        <head>
           <meta charset="UTF-8">
           <title>Display random image</title>
        </head>

        <body>
           <input type="button" id="randomImage" onclick="randomImage()" value="Random">
           <img src="" name="canvas" />
        </body>
      </html>

而且我不知道如何设置宽度和高度，所以我还没有为此编写代码，此代码只是在我单击按钮时随机显示图像

你的帮助是我的荣幸

【问题讨论】：

document.getElementsByName("canvas")[0].src = imagesArray[num]; 和宽度/高度：document.getElementsByName("canvas")[0].style.width = "100px"; document.getElementsByName("canvas")[0].style.height= "100px";

标签： javascript html random

【解决方案1】：

要通过名称属性识别您的图像，请使用getElementsByName 或更新的querySelector，您可以使用样式属性来设置宽度和高度：

document.getElementsByName("canvas")[0].src = imagesArray[num];

或

document.querySelector("img[name=canvas]").src = imagesArray[num];

对于宽度和高度（您也可以在此处使用 querySelector）：

document.getElementsByName("canvas")[0].style.width = "100px";      
document.getElementsByName("canvas")[0].style.height= "100px";

function randomImage(){
  let imagesArray = ['images/person1.jpg', 'images/person2.jpg', 'images/person3.jpg'];
  let num = Math.floor(Math.random() * 3);
  let image = document.getElementsByName("canvas")[0];
  image.src = imagesArray[num];
  image.style.width = "100px";
  image.style.height = "100px";
}

<input type="button" id="randomImage" onclick="randomImage()" value="Random">
<img src="" name="canvas" />

如果您想要一个随机的宽度和高度值，请使用它而不是我示例中的 100

【讨论】：

【解决方案2】：

你应该创建一个类：“image”

在 CSS 中你应该添加：。图片{ 宽度：220px； // 你把你的值放在这里高度：自动； // 考虑图像的比例 }

我不确定这是否能回答您的问题，但您也可以选择其他方法，如下所示：

<div class="wrapper">
<img>
</div>

.wrapper 的溢出设置为隐藏，img 的宽度为 100%，高度为自动，

【讨论】：

【解决方案3】：

你可以在这里使用window.canvas，但那是not advisable。要检索一个元素，document.querySelector 是您的朋友。

randomImage();

document.addEventListener("click", evt => {
  if (evt.target.nodeName === "BUTTON") {
    randomImage();
  }
});

function randomImage() {
  const imagesArray = [
    'https://picsum.photos/200/300',
    'https://picsum.photos/300/400',
    'https://picsum.photos/100/100'
  ];
  const randomNumber = Math.floor(Math.random() * 3);
  document.querySelector("img[name='canvas']").src = imagesArray[randomNumber];

}

button {
  float: right;
  position: fixed;
  right: 30vw;
  top: 1rem;
}

<img name="canvas" src="" />
<br><button>Another picture</button>

【讨论】：