Javascript 用于可伸缩图像拼图的CSS
我一直在努力完成一些没有用的事情。我需要的是一个方形div（1000x1000px），它可以在浏览器缩放时缩小，保持它的方形，并用它缩小它的内容。这个div有一个不应该重复的背景图像，还有4个div和一个类“puzzleRow”，每个div有4个div和类“puzzlePiece” 每个拼图块都包含一个用于单击的svg。和一个拼图图像，这意味着溢出，以便他们可以连接。这是我的htmlJavascript 用于可伸缩图像拼图的CSS,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我一直在努力完成一些没有用的事情。我需要的是一个方形div（1000x1000px），它可以在浏览器缩放时缩小，保持它的方形，并用它缩小它的内容。这个div有一个不应该重复的背景图像，还有4个div和一个类“puzzleRow”，每个div有4个div和类“puzzlePiece” 每个拼图块都包含一个用于单击的svg。和一个拼图图像，这意味着溢出，以便他们可以连接。这是我的html <body> <div id="contentContainer">&l
<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>
很抱歉问这么宽泛的问题，但我无法将其缩小到更具体的范围，因此我想知道是否有人对如何实现这一点有更好的想法。本质上，我只需要一个上面有拼图块的图像，可以隐藏以显示图像。我尝试了一段时间来修复您的问题，最后不得不编写javascript来处理“方形”板的大小。一旦我做到了这一点，我最终意识到，用javascript编写16个拼图块和16个点击区域的绝对位置div更容易。因此，我最终得出以下结论：
#容器{
背景图像：url（'http://www.mpaquette.com/wp-content/uploads/2017/03/bck.png');
背景尺寸：包含；
背景重复：无重复；
位置：相对位置；
溢出：隐藏；
}
.件{
位置：绝对位置；
}
var image_url=[
"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" ];
函数handleClick（元素）{
console.log（element.id）；
var image=document.getElementById（“拼图”+element.id）；
image.style.display=“无”；
//是否在此处执行其他单击处理
}
函数构建（）{
var div=document.getElementById（“容器”）；
对于（var i=0；ih）尺寸=h；
其他尺寸=w；
正方形=尺寸+像素；
el.style.minWidth=正方形；
el.style.MINHEIGH=正方形；
el.style.maxWidth=正方形；
el.style.maxHeight=正方形；
var工件尺寸=（尺寸/4）*1.6；
对于（var i=0；我想我明白了你想要完成的内容。你能发布一个提琴或密码笔吗？我想你的问题很容易解决。JSFIDLE不太好，但我想我大部分都能用。非常感谢！我想使用javascript可能会更容易，因为我已经很久没有在web上工作了，我只是一直在尝试，而不是再次感谢你的帮助！
#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;
}
<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>