2

私は現在、ショーケース Web サイトをまとめています。メイン コンテンツ エリアには、多数の画像/アイテムが必要であり、ボックスのような順序で並べて配置する必要があります...

http://jsfiddle.net/bdv3t/

ブラウザー ウィンドウを表示して小さくすると、これらの各画像/アイテムが徐々に縮小され、それが入っているコンテナーに比例して収まるようにするにはどうすればよいでしょうか (したがって、大画面では約 8 個あります)。画像/アイテムを左から右に並べます。小さい画面と同じですが、各画像のサイズのみが小さくなっています)?

thisやthisなどのレスポンシブ画像を使用することを検討しましたが、画像が 1 つだけ全幅になるため、うまくいきませんでした。可能であれば、テーブルの使用を避け、JS よりも CSS-HTML メソッドを使用したいと思いますが、それでもうまくいかない場合は、JS メソッドで十分です。

4

4 に答える 4

1

ページに 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();
});
于 2012-08-06T05:55:56.093 に答える
0

編集されたフィドルをチェックして、何か他のものが必要な場合は返信してください。

@media クエリ ソリューション。

于 2012-08-06T06:03:56.227 に答える
0

明らかにこれは作り直すことができますが、次のようなものです...

http://jsfiddle.net/LAWNQ/

于 2012-08-07T02:15:43.513 に答える