Question

我有一个包含父div的HTML文件。在我的JS代码中，在父级中创建了16个子div。我想做的是输入一个图像并使父div适合该图像，以使其充满容器。然后让每个子div从父div分别获取图像。

我正在尝试制作滑盖益智游戏，但与此处的其他帖子不同，我希望用户能够输入自己的图像，而不论其大小。我目前正在使用背景位置为每个子元素分配图片的一部分，但这仅适用于大于容器的图片。

我要尝试做的本质是告诉div1将div2中的背景图像用作其自身。

这是我的jsfiddle的链接。

https://jsfiddle.net/tdammon/zsthogrm/1/

$(document).ready(function(){
    let sq = 4

    let size = $("#image").width()
    let boxSize = size / sq
    let $url
    $('#gameImage').keypress(function(e){
        if(e.keyCode == 13){
            $url = $('#gameImage').val();
            console.log($url);
            for(let i=0;i<16;i++){
                let x = ((i%4) * boxSize)
                let y = (Math.floor(i/4) * boxSize)
                //$('#image').css("backgroundImage", `url(${$url})`);
                $('#image').append('<div class="piece" id= 
                "segment'+i+'"></div>')
                document.getElementById("segment"+i).style.width = 
                `${boxSize}`;
                document.getElementById("segment"+i).style.height = 
                `${boxSize}`;
                $('#segment'+i).css("backgroundImage", `url(${$url})`);                
        document.getElementById("segment"+i).style.backgroundPosition = 
        `-${x}px -${y}px`;
            }
        }
    });
})

Answer 1

尽管我认为换出背景图片应该非常简单，但这并不能直接回答您提出的问题。但是，如果潜在的问题只是简单地切换两个div的顺序，我想将div放在CSS网格中并交换行或列可能会更容易？

Answer 2

仍然不是直接的答案，但是只用background-size就可以了。

以您的示例为例（我刚刚在CSS中添加了一行）：

$(document).ready(function(){
    let sq = 4

    let size = $("#image").width()
    let boxSize = size / sq
    let $url
    $('#gameImage').keypress(function(e){
        if(e.keyCode == 13){
            $url = $('#gameImage').val();
            console.log($url);
            for(let i=0;i<16;i++){
                let x = ((i%4) * boxSize)
                let y = (Math.floor(i/4) * boxSize)
                //$('#image').css("backgroundImage", `url(${$url})`);
                $('#image').append('<div class="piece" id= "segment'+i+'"></div>')
                document.getElementById("segment"+i).style.width = `${boxSize}`;
                document.getElementById("segment"+i).style.height = `${boxSize}`;
                $('#segment'+i).css("backgroundImage", `url(${$url})`);
                document.getElementById("segment"+i).style.backgroundPosition = `-${x}px -${y}px`;
            }
        }
    });
    

})

#gameImage {
    display: block;
    margin: auto;
}

h3 {
    text-align: center;
}

#image {
    display: block;
    margin: auto;
    border: solid black;
    width: 600px;
    height: 600px;
    background-size: cover;
    display: flex;
    flex-wrap: wrap;
}

.piece {
    border: 1px solid black;
    margin: -1px -1px -1px -1px;
    height: 25%;
    width: 25%;
    background-size: 600px 600px; /*just one line here*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Puzzle Game</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <div>
            <h3> Enter Image Here</h3>
            <input placeholder="image" id="gameImage">
        </div>
        <div id="image">

        </div>
        <script src="jquery-3.3.1.min.js"></script>
        <script src="main.js" async defer></script>
    </body>
</html>

当然，您可以通过自动计算网格的大小和块的background-size来进一步推动它。只要两者相等，就应该起作用。

我可以告诉一个div使用另一个div的图像吗？ CSS JS

2 个答案: