Question

我想重现图像在tumblr存档（example）中的显示方式。

更明确地说，我有10个图像，我希望将它们全部显示为矩形中的缩略图图像;图像必须相互交错。
我想知道使用哪种算法来计算每个缩略图的大小和位置。

有谁知道怎么做？

Answer 1

我有一个网站HERE所以想想这个画廊是你希望的那种东西。您需要做的第一件事是使图像的大小正确。为此，我使用photohshop，但任何图像编辑器都可以。创建一个所有图像都适合的文档。将图像放在您想要的位置，并相应地调整它们的大小。使用PhotoShops标尺工具确保每个图像之间的间隙相同。

完成此操作后，将每个图像保存为该大小。它们现在彼此成比例。 CSS很简单，我通常以百分比的形式进行，但像素也可以正常工作。如果您有10张图像，那么您可能希望每张图像之间的间隔为1％，即9％，每张图像之间留下91％的分割，将宽度设置为9.1％，这是您的第一行。这里有一个更好的例子是我用于上面链接的网站的CSS和html：

HTML and 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>

tumblr存档中的图像布局

1 个答案: