Javascript 在多个div上拉伸图像

如何将容器1的背景图像拉伸到容器2

<div class="main_container">
   <div class="container" id="container-1"></div>
   <div class="container" id="container-2"></div>
</div>

---

以下是两个容器的图像：

---

谢谢

你试过这个吗

.main\u容器{
对齐内容：拉伸；
背景图像：；
}

如果父容器

.main_container

仅包含2个

.container

div，并且必须通过

#container-1

将背景图像加载到页面中，那么我将使用JavaScript将背景图像从

#container-1

传输到

.main_container

。然后，背景图像将覆盖整个区域，包括

#container-1

和

#container-2

const parent=document.querySelector（“.main_container”）
const image=document.querySelector（“#container-1”）.style.backgroundImage
parent.style.backgroundImage=图像

很好的解决方案，但我在一个容器和另一个容器之间留有余量。这涵盖了整个区域，但我只需要在cotainer上的图像，以便边缘保持空白。另外，总共有7个容器。然后我仍然会将父元素设置为具有背景图像，并只向子容器添加边框以模拟边距。谢谢，但是我在一个容器和另一个容器之间有边距。这涵盖了整个区域，但我只需要在cotainer上的图像，以便边缘保持空白。

var posX = 0;
var posY = 0;
var i = 0;
$(".container").each(function (ind, el) {
    $(this).css("background-position", posX.toString() + "% " + posY.toString() + "%");
    posX += 20;
    i++;
    if (i == 1) {
        i = 0;
        posX = 0;
        posY += 0;
    }
})