ページに jQuery を含めます。例:
<script src="jquery-latest.js"></script>
すべてのパズルのピースにクラスを追加します。例:
<li><img class="pieces" src="http://dummyimage.com/200x200/000/fff" alt="1" width="200" height="200"/></li>
<li><img class="pieces" src="http://dummyimage.com/200x200/000/fff" alt="1" width="200" height="200"/></li>
// etc.
次の JavaScript のようなものを含めます (これにより、パズルのピースがウィンドウ サイズの 1/5 になります)。
$(document).ready(function() {
$(window).on("resize", function() {
$(".pieces").width($(window).width() / 5).height($(window).height() / 5);
});
});
これを Fiddle でテストしたところ、問題なく動作しました。Fiddle に jQuery を含めるには、フレームワークとして左側でそれを選択します (例: jQuery 1.7.2)。次に、ピースにクラス名を追加し、JavaScript ボックスにスクリプトを追加します。必要な正確な動作が得られるまでテストします。
編集:ピクセルの歪みを最小限に抑えたい場合は、さまざまな画像サイズをいくつか用意し、サイズ変更の直前に画像ソースを使用可能な最も近いサイズにリセットします。たとえば、タイルに 400x400、300x300、200x200、100x100、および 50x50 の画像サイズがあるとします。JavaScript は次のように変更されます。
$(document).ready(function() {
updatePieceSize = function() {
var side, imgSize, src;
side = Math.min($(window).width(), $(window).height()) / 5;
if (side >= 350) {
imgSize = "400x400";
} else if (side >= 250) {
imgSize = "300x300";
} else if (side >= 150) {
imgSize = "200x200";
} else if (side >= 75) {
imgSize = "100x100";
} else {
imgSize = "50x50";
}
src = "http://dummyimage.com/" + imgSize + "/000/fff";
$(".pieces").attr("src", src).width(side).height(side);
};
$(window).on("resize", updatePieceSize);
updatePieceSize();
});