Установить ширину и высоту изображения случайным образом на Javascript - PullRequest
Новая
       6

Установить ширину и высоту изображения случайным образом на Javascript

0 голосов
/ 18 июня 2020

Мне трудно понять, как я могу установить ширину и высоту для случайных изображений, когда они отображаются. Кто-нибудь может мне помочь, пожалуйста?

Это мой код 

    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>

И я не знаю, как установить ширину и высоту, поэтому я еще не писал для этого код, этот код просто отображает изображения случайным образом, когда я нажимаю кнопку

Мне очень нравится ваша помощь

Ответы [ 3 ]

1 голос
/ 18 июня 2020

Чтобы идентифицировать ваше изображение по атрибуту имени, используйте 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 в моем примере

0 голосов
/ 18 июня 2020

Вы могли бы использовать здесь window.canvas, но это не рекомендуется . Чтобы получить один элемент, 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>
0 голосов
/ 18 июня 2020

Вы должны создать класс: "image"

и в CSS вы должны добавить: .image {width: 220px; // вы указываете здесь свое значение height: auto; // чтобы учесть пропорции изображения}

Я не уверен, отвечает ли это на ваш вопрос, но вы также можете выбрать другой подход, который вы можете сделать следующим образом: 

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

где .wrapper для переполнения задано скрытое значение, а img имеет ширину 100% и высоту автоматически,

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...