HTML背景图像被放大

Question

我试图每5秒更改一个部分的背景图像，我已经通过使用JavaScript做到了这一点。但问题是图像被放大了。我做错了什么？

HTML:

<section id="hero" class="d-flex align-items-end ">

JavaScript:

function displayNextImage() 
{
x = (x === images.length - 1) ? 0 : x + 1;
document.getElementById("imgg").src = images[x];
document.getElementById("hero").style.background = first[x];
}

var first = [], k = -1;
first[0] = "url('1.jpg') no-repeat";
first[1] = "url('2.jpg') no-repeat";
first[2] = "url('3.jpg') no-repeat";

Answer 1

可能图像大小不合适，请尝试将background-size设置为cover:

HTML:

<section id="hero" class="d-flex align-items-end ">

JS:

function displayNextImage(){
x = (x === images.length - 1) ? 0 : x + 1;
document.getElementById("imgg").src = images[x];
document.getElementById("hero").style.background = first[x];
}

var first = [], k = -1;
first[0] = "url('1.jpg') no-repeat cover";
first[1] = "url('2.jpg') no-repeat cover";
first[2] = "url('3.jpg') no-repeat cover";

Answer 2

如果您想查看完整的图像大小，则：

first[0] = "url('1.jpg') no-repeat;background-size: contain;";
first[1] = "url('2.jpg') no-repeat;background-size: contain;";
first[2] = "url('3.jpg') no-repeat;background-size: contain;";

• 您还可以按百分比/像素/…设置图像大小。。。类似背景大小：50%；**如果使用包含，并且图像大小过大，可能会导致溢出

如果你想看到与你的元素大小相关的图像，那么：

first[0] = "url('1.jpg') no-repeat center center;background-size: cover;";
first[1] = "url('2.jpg') no-repeat center center;background-size: cover;";
first[2] = "url('3.jpg') no-repeat center center;background-size: cover;";

• (背景大小：封面(将剪切图像(如果需要(并设置为元素大小。**如果你想使用这种风格，最好图像大小相同，这可能是你的最佳选择

祝好运