0

tumblrアーカイブの画像の表示方法を再現したい(例)。

より明確には、たとえば、10 個の画像があり、それらすべてを長方形のサムネイル画像として表示したいと考えています。画像は互いにインターリーブする必要があります。
各サムネイルのサイズと位置を計算するためにどのアルゴリズムが使用されているのだろうか。

誰もそれを行う方法を知っていますか?

4

1 に答える 1

2

私はここにサイトを持っているので、このギャラリーはあなたが望んでいるようなものだと思います. 最初に行う必要があるのは、画像を正しいサイズにすることです。これにはフォトショップを使用しますが、どの画像エディターでも構いません。すべての画像が収まるドキュメントを作成します。画像を好きなようにレイアウトし、それに応じてサイズを変更します。PhotoShops 定規ツールを使用して、各画像間のギャップが同じであることを確認します。

これが完了したら、各画像をそのサイズで保存します。それらは現在、互いに比例しています。CSS は単純です。通常はパーセンテージで行いますが、ピクセルも問題なく機能します。10 個の画像がある場合、各画像間に 1% の余白が必要な場合があります。これは 9% で、各画像間で分割するために 91% が残ります。幅をそれぞれ 9.1% に設定すると、それが最初の行になります。より良い例として、上記のリンク先のサイトで使用した CSS と html を次に示します。

HTMLとCSS

<section id="gallery">
        <div id="line_1">
            <div id="image_1">
                <a href="images/gallery_1.jpg" class="lightbox"><img style="width: 100%;" src="images/thumbnail_1.jpg" alt="Beach and yacht in the sun" /></a>
            </div>
            <div id="image_2">
                <a href="images/gallery_5.jpg" class="lightbox"><img style="width: 100%;" src="images/thumbnail_2.jpg" alt="Cove - looking out to see" /></a>
            </div>
        </div>
        <div style="clear:both;">
        </div>
        <div id="line_2">
            <div id="image_3">
                <a href="images/gallery_4.jpg" class="lightbox"><img style="width: 100%;" src="images/thumbnail_3.jpg" alt="Blue skies, looking through  stair hole" /></a>
            </div>
            <div id="line_2_2">
                <div id="image_4">
                    <a href="images/gallery_2.jpg" class="lightbox"><img style="width: 100%;" src="images/thumbnail_4.jpg" alt="beach and yacht at night" /></a>
                </div>
                <div style="clear:both;">
                </div>
                <div id="line_2_3">
                    <div id="image_5">
                        <a href="images/gallery_6.jpg" class="lightbox"><img style="width: 100%;" src="images/thumbnail_5.jpg" alt="hills in the summer" /></a>
                    </div>
                    <div id="image_6">
                        <a href="images/gallery_3.jpg" class="lightbox"><img style="width: 100%;" src="images/thumbnail_6.jpg" alt="Blue skies, looking through  stair hole different angle 2" /></a>
                    </div>
                    <div style="clear:both;">
                    </div>
                </div>
            </div>
        </div>
        <div style="clear:both;">
        </div>
        <div id="line_3">
            <div id="image_7">
                <a href="images/attractions_3.jpg" class="lightbox"><img style="width: 100%;" src="images/thumbnail_7.jpg" alt="Blue skies, looking through  stair hole different angle 3" /></a>
            </div>
            <div id="image_8">
                <a href="images/about_3.jpg" class="lightbox"><img style="width: 100%;" src="images/thumbnail_8.jpg" alt="hills in the summer with person looking over village" /></a>
            </div>
        </div>
        <div style="clear:both;">
        </div>
        <div id="line_4">
            <div id="image_9">
                <a href="images/about_1.jpg" class="lightbox"><img style="width: 100%;" src="images/thumbnail_9.jpg" alt="little town in summer" /></a>
            </div>
            <div id="image_10">
                <a href="images/attractions_2.jpg" class="lightbox"><img style="width: 100%;" src="images/thumbnail_10.jpg" alt="Looking at the castle from a distance" /></a>
            </div>
            <div id="image_11">
                <a href="images/about_2.jpg" class="lightbox"><img style="width: 100%;" src="images/thumbnail_11.jpg" alt="very old photo of church with red door" /></a>
            </div>
        </div>
        <div style="clear:both;">
        </div>
    </section>
于 2013-03-10T16:57:14.427 に答える