javascript - 在多个 div 上拉伸(stretch)图像

Question

如何将容器 1 的背景图像拉伸(stretch)到容器 2？

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

我使用了这个功能，但它并不总是有效。

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;
    }
})

<小时/>

这是 2 个容器的图像:

<小时/>

谢谢

Answer 1

如果父.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 = image