我想重现图像在 tumblr 存档 ( example ) 中的显示方式。
更明确地说,例如,我有 10 张图片,我想将它们全部显示为矩形中的缩略图;图像必须相互交错。
我想知道使用哪种算法来计算每个缩略图的大小和位置。
有人知道怎么做吗?
最佳答案
我有一个网站 HERE所以认为这个画廊是您所希望的那种东西。您需要做的第一件事是使图像大小正确。为此,我使用 photohshop,但任何图像编辑器都可以。创建一个所有图像都适合的文档。将图像按照您想要的方式布置并相应地调整它们的大小。使用 PhotoShops 标尺工具确保每张图片之间的间隙相同。
完成此操作后,将每个图像保存为该大小。它们现在彼此成比例。 CSS 很简单,我通常按百分比来做,但像素也能正常工作。如果你有 10 张图片,那么你可能希望每张图片之间有 1% 的边距,即 9%,剩下 91% 可以在每张图片之间分割,将每张图片的宽度设置为 9.1%,这就是你的第一行。一个更好的例子是我在上面链接的网站中使用的 CSS 和 html:
<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>
关于css - tumblr 存档中的图像布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15323297/