Как изменить размер изображения в JavaScript

Question

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

Я пытался создать новую функцию и т. Д., Но я бы предпочел, чтобы было что-то, что я мог бы вставить в оператор switch или CSS.

function randomCat() {
let number = Math.floor(Math.random()* 20);

switch(number) {
case 0:
document.body.style.image = 'url("cat1.jpg")';
break;
case 1:
document.body.style.image = 'url("cat2.jpg")';
break;
case 2:
document.body.style.image = 'url("cat3.jpg")';
break;
case 3:
document.body.style.image = 'url("cat4.jpg")';
break;
case 4:
document.body.style.image = 'url("cat5.jpg")';
break;
case 5:
document.body.style.image = 'url("cat6.jpg")';
break;

За фоновым изображениемизображения кошек, и я хотел бы, чтобы изображения были маленькими, чтобы за ним было видно фоновое изображение.

Answer 1

Атрибут

style не имеет свойства image. Если вы хотите добавить background-image, используйте backgroundImage. Вы прикрепляете изображения к body документа. Вместо этого вы можете создать контейнер типа div и установить height и width в div, тогда вы можете прикрепить изображения к этому div.

const div = document.querySelector('div');

function randomCat() {
    let number = Math.floor(Math.random()* 20);
    console.log(number);
    switch(number) {
    case 0:
    div.style.backgroundImage = 'url("https://htmlreference.io/images/traffic.jpg")';
    break;
    case 1:
    div.style.backgroundImage = 'url("https://www.html-5-tutorial.com/images/atitlan.jpg")';
    break;
    case 2:
    div.style.backgroundImage = 'url("cat3.jpg")';
    break;
    case 3:
    div.style.backgroundImage = 'url("cat4.jpg")';
    break;
    case 4:
    div.style.backgroundImage = 'url("cat5.jpg")';
    break;
    case 5:
    div.style.backgroundImage = 'url("cat6.jpg")';
    break;
    default: 
    div.style.backgroundImage = 'url("https://www.html-5-tutorial.com/images/atitlan.jpg")';
    break;
    }
}

randomCat();

div {
    height: 200px;
    width: 200px;
    display: inline-block;
}
body {
    text-align: center
}

<div></div>