我一直试图成就无济于事。我需要的是一个方形div 1000x1000px），当浏览器缩放时缩小，保持它的正方形，并用它缩放它的内容。 div有一个背景图片，不应该重复，4个div与一个类＆＃34; puzzleRow＆＃34;每个人都有4个div与类＃34; puzzlePiece＆＃34;。
每个puzzlePiece包含一个用于点击的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;
}
这几乎是完美的，除非如果我将puzzlePieces上的250px高度更改为25％，那么将没有任何东西可以给任何尺寸的东西，它全部下降到没有可见内容的青少年正方形。我不能想办法让它完全动态，没有一些元素具有规定的大小。
很抱歉提出这么广泛的问题，但我还没有把它缩小到更具体的范围，所以我想知道是否有人对如何实现这一目标有更好的了解。基本上我只需要一个带有拼图的图像，可以隐藏它来显示图像。
答案 0 :(得分：1)
我尝试了一段时间来修复你所拥有的东西，最后不得不编写javascript来处理“方形”电路板尺寸。一旦我这样做，我最终意识到整个事情更容易用javascript编写，绝对定位DIV为16个拼图和16个点击区域。结果我最终得到了这个：
<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以包含连续调整大小....