Wie man die Größe eines Bildes in javascript

Ich bin mit einer switch-Anweisung und eine zufällige, abgerundete Anzahl an load-eine randomisierte Bild einer Katze in meiner Anwendung. Aber ich kann nicht scheinen, um die Größe zu verändern. Im moment ist es nur den gesamten Bildschirm ausfüllt. Ich bin relativ neu in Javascript, so dass ich haven ' T fand einen Weg, das zu tun dieses noch.

Ich habe versucht, erstellen Sie eine neue Funktion usw. aber ich würde viel lieber, wenn es etwas, das ich setzen könnte, in der switch-Anweisung oder 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;

Es ist ein hintergrund Bild hinter der Katze Bilder, und ich möchte die Bilder zu klein sein, so dass das Bild im hintergrund zeigt sich dahinter.

1 Antworten

  • randomSoul
    4. Mai 2019

    style das Attribut nicht haben image Eigenschaft. Wenn Sie möchten, fügen Sie die background-image, Verwendung backgroundImage. Sie sind das anbringen der Bilder an der body des Dokuments. Statt Ihrer können einen container erstellen wie div und set height und width mit div, dann können Sie fügen Sie die Bilder auf 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>