如何在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>