スケーラブルなパズルのためのCSS画像

私は役に立たないものを達成しようとしています。私が必要とするのは、ブラウザのスケールが小さくなるとスケールが小さくなり、四角形を維持し、コンテンツを縮小した正方形のdiv 1000x1000pxです。 divには、繰り返されるべきではない背景イメージと、それぞれがクラス "puzzlePiece"と4つのdivを持つ "puzzleRow"クラスの4つのdivがあります。スケーラブルなパズルのためのCSS画像

各puzzlePieceには、クリックするためのsvgが含まれています。オーバーフローして接続できるようにするためのパズルイメージ。ここでは...限り私が持っているCSSとしての私の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>

だ

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

これは除いて、ほぼ完璧である私は、その後25％にpuzzlePiecesに250ピクセルの高さを変更した場合どんなサイズでも提供するものは何もなく、目に見える内容のない小さなスクエアにすべて落とされます。定義されたサイズを持つ要素がなくても、完全に動的にする方法は考えられません。

このような幅広い質問をして申し訳ありませんが、より具体的なものに絞り込むことはできませんでした。だから誰かがこれを達成する方法についてもっと良いアイデアを持っているのだろうかと思います。基本的には、画像を表示するために隠すことができるパズルピースのある画像が必要です。

出典

2017-03-10 mpaquette

私はあなたが完成しようとしているものを得ていると思います..あなたはフィドルやコードペンを投稿できますか？ – Cam

jsfiddleではあまりうまくいかないけど、私はそのほとんどが動いていると思う[リンク]（https://jsfiddle.net/vn0hmjom/4/） – mpaquette

私はしばらくあなたが持っていたものを修正しようとし、 "正方形"のボードサイズを処理するためにJavaScriptを書く必要がありました。私がこれをやった後は、16個のパズルピースと16個のクリック領域の絶対配置されたDIVを使ってjavascriptで書くのが簡単だったことに気付きました。その結果、私はこれで終わった：

<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のみリサイズを呼び出すことに注意してください（）を1回 - あなたが呼び出す必要があります上記のコードのようにブラウザのサイズが変更されるたびに編集::ちょうどjsfiddleを変更して、連続的なサイズ変更を含むようにしました。

出典

2017-03-10 20:50:58 fmacdee

ありがとう！私はJavaScriptを使用して簡単になるかもしれないと思った、それは私がちょうどこれを試して、あなたの助けをお寄せいただきありがとうございました！ – mpaquette

スケーラブルなパズルのためのCSS画像

答えて

関連する問題