CSS可扩展拼图超过图像

我一直在尝试完成一些事情。我需要的是一个Square Div 1000x1000px），当浏览器缩放，保持正方形并将其缩放的内容缩放时，它会缩放。Div具有不应重复的背景图像，而4个Divs则带有" uzzlerow"类，每个div s ofzlelow''upepiece'''

每个拼图都包含一个用于单击的SVG。以及旨在溢出的拼图图像，以便它们可以连接。这是我的html ....

<body>
        <div id="contentContainer"></div>
        <div id="column">
            <div id="container">
                <div class="puzzleRow">
                    <div class="puzzPiece">
                        <img src="topLeft.png"></img>
                        <div class="clickArea" linkto="puzzle01.html"></div>
                    </div>
                    <div class="puzzPiece">
                        <img src="topA.png"></img>
                        <div class="clickArea" linkto="puzzle02.html"></div>
                    </div>
                    <div class="puzzPiece">
                        <img src="topB.png"></img>
                        <div class="clickArea" linkto="puzzle03.html"></div>
                    </div>
                    <div class="puzzPiece">
                        <img src="topRight.png"></img>
                        <div class="clickArea" linkto="puzzle04.html"></div>
                    </div>
                </div>
                <div class="puzzleRow">
                    <div class="puzzPiece">
                        <img src="leftA.png"></img>
                        <div class="clickArea" linkto="puzzle05.html"></div>
                    </div>
                    <div class="puzzPiece">
                        <img src="midA.png"></img>
                        <div class="clickArea" linkto="puzzle06.html"></div>
                    </div>
                    <div class="puzzPiece">
                        <img src="midB.png"></img>
                        <div class="clickArea" linkto="puzzle07.html"></div>
                    </div>
                    <div class="puzzPiece">
                        <img src="rightA.png"></img>
                        <div class="clickArea" linkto="puzzle08.html"></div>
                    </div>
                </div>
                <div class="puzzleRow">
                    <div class="puzzPiece">
                        <img src="leftB.png"></img>
                        <div class="clickArea" linkto="puzzle09.html"></div>
                    </div>
                    <div class="puzzPiece">
                        <img src="midB.png"></img>
                        <div class="clickArea" linkto="puzzle10.html"></div>
                    </div>
                    <div class="puzzPiece">
                        <img src="midA.png"></img>
                        <div class="clickArea" linkto="puzzle11.html"></div>
                    </div>
                    <div class="puzzPiece">
                        <img src="rightB.png"></img>
                        <div class="clickArea" linkto="puzzle12.html"></div>
                    </div>
                </div>
                <div class="puzzleRow">
                    <div class="puzzPiece">
                        <img src="btmLeft.png"></img>
                        <div class="clickArea" linkto="puzzle13.html"></div>
                    </div>
                    <div class="puzzPiece">
                        <img src="btmA.png"></img>
                        <div class="clickArea" linkto="puzzle14.html"></div>
                    </div>
                    <div class="puzzPiece">
                        <img src="btmB.png"></img>
                        <div class="clickArea" linkto="puzzle15.html"></div>
                    </div>
                    <div class="puzzPiece">
                        <img src="btmRight.png"></img>
                        <div class="clickArea" linkto="puzzle16.html"></div>
                    </div>
                </div>
            </div>
        </div>
    </body>

就CSS而言，我有...

#column{
    max-width:1000px;
    max-height:1000px;
}
#container{
    width:100%;
    height:auto;
    background-image: url('bck.png');
    background-size: contain;
    background-repeat: no-repeat;
}
.puzzleRow {
    display: inline-block;
    width: 100%;
    height: 250px;
    text-align: center;
    vertical-align: middle;
}

.puzzPiece {
    position: relative;
    float: left;
    width: 25%;
    height: 25%;
    overflow: visible;
}

这几乎是完美的，除非我将拼图的250px高度更改为25％，那么就不会有任何尺寸的东西，而且所有这些都会降低到一个没有可见内容的小正方形。我想不出一种使它完全动态的方法，没有某些元素具有定义的大小。

很抱歉问一个广泛的问题，但我无法将其缩小到更具体的内容，所以我想知道是否有人对如何实现这一目标有更好的想法。本质上，我只需要一个带有拼图片的图像，可以隐藏以揭示图像。

我尝试了一段时间来修复您的内容，最终不得不编写JavaScript来处理"正方形"板尺寸。一旦我这样做，我最终意识到，整个过程更容易在JavaScript中写下16个拼图和16个点击区域的绝对位置Divs。结果，我最终得到了：

<head>
<style>
#container{
  background-image: url('http://www.mpaquette.com/wp-content/uploads/2017/03/bck.png');
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
  overflow:hidden;
}
.piece {
  position:absolute;
}
</style>
</head>
<body>
  <div id="container">
  </div>
</body>
<script>
var image_urls = [
"http://www.mpaquette.com/wp-content/uploads/2017/03/topLeft.png",
"http://www.mpaquette.com/wp-content/uploads/2017/03/topA.png",
"http://www.mpaquette.com/wp-content/uploads/2017/03/topB.png",
"http://www.mpaquette.com/wp-content/uploads/2017/03/topRight.png",
"http://www.mpaquette.com/wp-content/uploads/2017/03/leftA.png",
"http://www.mpaquette.com/wp-content/uploads/2017/03/midA.png",
"http://www.mpaquette.com/wp-content/uploads/2017/03/midB.png",
"http://www.mpaquette.com/wp-content/uploads/2017/03/rightA.png",
"http://www.mpaquette.com/wp-content/uploads/2017/03/leftB.png",
"http://www.mpaquette.com/wp-content/uploads/2017/03/midB.png",
"http://www.mpaquette.com/wp-content/uploads/2017/03/midA.png",
"http://www.mpaquette.com/wp-content/uploads/2017/03/rightB.png",
"http://www.mpaquette.com/wp-content/uploads/2017/03/btmLeft.png",
"http://www.mpaquette.com/wp-content/uploads/2017/03/btmA.png",
"http://www.mpaquette.com/wp-content/uploads/2017/03/btmB.png",
"http://www.mpaquette.com/wp-content/uploads/2017/03/btmRight.png" ];
function handleClick(element) {
  console.log(element.id);
  var image = document.getElementById("puzzle" + element.id);
  image.style.display = "none";
  // do any other click handling here
}
function build() {
  var div = document.getElementById("container");
  for(var i=0;i<16;i++) {
    var image = document.createElement("img");
    image.id = "puzzle" + i;
    image.className = "piece";
    image.src = image_urls[i];
    div.appendChild(image);
    var clickdiv = document.createElement("clickdiv");
    clickdiv.id = i;
    clickdiv.onclick = function() { handleClick(this); }
    clickdiv.className = "piece";
    div.appendChild(clickdiv);
  }
}
function resize() {
  var el = document.getElementById("container");
  var w = window.innerWidth;
  var h = window.innerHeight;
  var square;
  var size;
  console.log("("+w+","+h+")");
  if(w>h) size = h;
  else size = w;
  square = size + "px";
  el.style.minWidth = square;
  el.style.minHeight = square;
  el.style.maxWidth = square;
  el.style.maxHeight = square;
  var piece_size = (size/4) * 1.6;
  for(var i=0;i<4;i++) {
    var y = i*(size/4) + size/8;
    for(var j=0;j<4;j++) {
      var x = j*(size/4) + size/8;
      var clickdiv = document.getElementById((i*4+j));
      clickdiv.style.left = (x - size/8) + "px";
      clickdiv.style.top = (y - size/8) + "px";
      clickdiv.style.width = (size/4) + "px";
      clickdiv.style.height = (size/4) + "px";
      var image = document.getElementById("puzzle" + (i*4+j));
      image.style.left = (x - piece_size / 2) + "px";
      image.style.top = (y - piece_size / 2) + "px";
      image.style.width = piece_size + "px";
    }
  }
}
window.onresize = function(e) { resize(); }
window.onload = function(e) { build(); resize(); } 
</script>
</body>

您可以在这里尝试：https://jsfiddle.net/francismacdougall/5v3clh15/

请注意，JSFIDDLE仅调用Resize（）一次 - 每当浏览器调整上述代码中的大小时，您都需要调用它。编辑::刚修改了JSFIDDLE以包括连续调整。...

相关内容

最新更新

热门标签：