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