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;";

• 您也可以按百分比/像素/...设置图像大小，例如 background-size: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;";

• (background-size: cover) 将剪切图像（如果需要）并设置为元素大小。 **如果你想使用这种风格，最好是图片大小相同，这可能是你最好的选择。

祝你好运