通過圖像的可伸縮拼圖的CSS

我一直在試圖完成某些無濟於事。我需要的是一個正方形的div 1000x1000px），它可以在瀏覽器縮放時縮小尺寸，保持平方，並用它縮小內容。該div有一個不應該重複的背景圖像，以及4個帶有「puzzleRow」類的div，每個類有4個div，類爲「puzzlePiece」。通過圖像的可伸縮拼圖的CSS

每個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的250像素，高度到25％，那麼沒有任何東西可以給予任何尺寸的東西，並且它全部下降到一個沒有可見內容的小方格。我想不出有什麼辦法讓它完全動態，沒有一些元素具有定義的大小。

對不起，提出這樣一個廣泛的問題，但我沒有能夠縮小到任何更具體的，所以我想知道如果任何人有更好的主意，如何做到這一點。從本質上講，我只需要一個帶有拼圖的圖像，它可以隱藏起來以顯示圖像。

來源

2017-03-10 mpaquette

我想我得到你正在嘗試完成..你可以張貼小提琴或codpen ..我認爲你的問題是一個簡單的修復。 – Cam

與jsfiddle不是很好，但我認爲我的大部分工作[鏈接]（https://jsfiddle.net/vn0hmjom/4/） – mpaquette

我嘗試了一段時間來解決你的問題，並最終不得不編寫JavaScript來處理「方形」電路板尺寸。一旦我這樣做了，我最終意識到整個事情更容易用JavaScript編寫，其中16個拼圖塊和16個點擊區域的絕對定位DIV。因此，我結束了與此：

<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僅調用調整大小（）一次 - 你需要調用它只要瀏覽器在上面的代碼中調整大小。編輯::只是修改jsfiddle包括連續調整大小....

來源

2017-03-10 20:50:58 fmacdee

非常感謝你！我認爲使用javascript可能會更容易一些，因爲我已經在web上工作了很長時間，我剛剛試圖嘗試這種方式，再次感謝您的幫助！ – mpaquette

通過圖像的可伸縮拼圖的CSS

回答

相關問題