Question

我正在使用switch语句和一个随机的，四舍五入的数字在我的应用程序中加载一只猫的随机图片。但我似乎无法调整大小。目前，它仅覆盖整个屏幕。我是Java的新手，所以还没有找到实现此目的的方法。

我试图创建一个新函数等，但是我宁愿在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>

如何在JavaScript中调整图片大小

1 个答案: