Cómo cambiar el tamaño de una imagen en javascript

Estoy usando una instrucción switch y un azar, el número redondeado a la carga de un estudio aleatorizado imagen de un gato en mi aplicación. Pero me parece que no puede cambiar de tamaño. En el momento en que sólo cubre toda la pantalla. Yo soy relativamente nuevo en Javascript por lo que no he encontrado una manera de hacer esto.

He intentado crear una nueva función, etc. pero me gustaría mucho más si había algo que podía poner en la instrucción switch o 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;

Hay una imagen de fondo detrás de las fotos del gato y me gustaría que las imágenes a ser pequeño, por lo que la imagen de fondo aparece detrás de ella.

1 Respuestas

  • randomSoul
    4 de mayo de 2019

    style atributo no tiene image la propiedad. Si desea agregar el background-image, use backgroundImage. Va a adjuntar las imágenes a la body de documento. En cambio, puede crear un contenedor como div y el conjunto height y width a div, entonces usted puede adjuntar las imágenes a este 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;
}
    <div></div>