在浏览Sylvia 的博客文章时，我发现了一种有趣的技术，用于创建宝丽来风格的图像库。这似乎是在我的网站上展示照片的一种有趣的方式，所以我决定尝试一下。
然而，当我将 CSS 复制并粘贴到我的网站代码中后，结果并不完全符合我的预期：
“好吧，”我心想，“看来我得重写这个了。”
这就是结果！我的宝丽莱风格图像库版本，甚至与默认主题兼容。
亲自看看：
操作方法
因此，让我们弄清楚如何自己创建它。如果您只想要代码，请跳到那里。
HTML&Markdown代码供参考
<section class=“tiny-photos”> <ul> <li> <img src=“https://bear-images.sfo2.cdn.digitaloceanspaces.com/flyfish/img_0293.webp” alt=“IMG_0293”> <ul> <li>Cloud☁️</li> </ul> </li> <li> <img src=“https://bear-images.sfo2.cdn.digitaloceanspaces.com/flyfish/img_0930.webp” alt=“IMG_0930”> <ul> <li>Sunset🌇</li> </ul> </li> <li> <img src=“https://bear-images.sfo2.cdn.digitaloceanspaces.com/flyfish/img_8530.webp” alt=“IMG_3”> <ul> <li>Sign🪧 & Cloud on some unknown highway</li> </ul> </li> <li> <img src=“https://bear-images.sfo2.cdn.digitaloceanspaces.com/flyfish/image-1.webp” alt=“image”> <ul> <li>被作业硬控</li> </ul> </li> </ul> </section> <section class="tiny-photos"> +  + Cloud☁️ +  + Sunset🌇 +  + Sign🪧 & Cloud on some unknown highway +  + 被作业硬控</section>
首先，让我们为图像指定背景颜色以模仿框架外观。另外，我们需要<li> flex 中的垂直元素：
.tiny-photos > ul > li { background-color: var(—tp-frame-color); box-shadow: 0px 3px 3px var(—tp-shadow-color); display: flex; flex-direction: column; width: min-content; height: min-content; }
结果：
然后尝试排列<li> ，使它们在<ul>中水平弯曲，并将<ul>元素居中。
.tiny-photos > ul { display: flex; padding: var(—space-s); gap: var(—space-3xs); flex-wrap: wrap; flex-direction: row; justify-content: center; }
它应该看起来像这样：
哇！它开始聚集在一起！
我们继续吧。现在向<img>和<ul>内的文本添加边距和填充，并删除<ul>中的列表指示符。
值得注意的是，对于<img>元素，为了以正确且适当的比例和大小显示它，您应该将auto应用于height和width ，同时将max-{height|width}设置为所需的数字。
.tiny-photos > ul > li img { height: auto; width: auto; max-width: 20rem; max-height: 20rem; margin: 0.7em; margin-bottom: -0.1rem; } .tiny-photos > ul > li ul { margin: 0.4em; margin-left: 0; padding-left: 1em; } .tiny-photos ul { list-style: none; font-family: "FusionPix"; /* change as you wish */ font-size: var(--fs--1); color: var(--text-color); }
现在它看起来应该和我们一开始想要的几乎一样:)
最后让它绕中心弯曲并添加旋转，给人一种照片随意放置的感觉。 （拟物化的感觉）
.tiny-photos > ul { display: flex; padding: var(--space-s); gap: var(--space-3xs); flex-wrap: wrap; flex-direction: row; justify-content: center; } .tiny-photos { width: 80vw; position: relative; left: calc(-40vw + 50%); } /* Rotation, credit sylvia.bearblog.dev */ .tiny-photos > ul > li:first-child { rotate: -3deg; } .tiny-photos > ul > li:nth-child(odd) { margin-right: 1em; } .tiny-photos > ul > li:nth-child(even) { rotate: -1deg; margin-top: 1em; } .tiny-photos > ul > li:nth-child(3n) { rotate: -3deg; } .tiny-photos > ul > li:nth-child(5n) { rotate: 1deg; margin-top: 1.5em; } .tiny-photos > ul > li:nth-child(7n) { rotate: 4deg; margin-bottom: 1em; } .tiny-photos > ul > li:nth-child(11n) { rotate: 2deg; margin-top: 0.5em; } .tiny-photos > ul > li:nth-child(3), .tiny-photos > ul > li:nth-child(13n) { rotate: 6deg; } .tiny-photos > ul > li:nth-child(17n) { rotate: -5deg; } /* Hover effect, only on larger screens */ @media (min-width: 799px) { .tiny-photos > ul > li:hover { z-index: 99; transform: scale(1.3); box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02), 6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028), 12.5px 12.5px 10px rgba(0, 0, 0, 0.035), 22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042), 41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05), 100px 100px 80px rgba(0, 0, 0, 0.07); } .tiny-photos > ul > li { transition: 300ms ease; } }
最终代码
代码和文章写的很辛苦，如果对你有帮助，请点赞，谢谢。
/* Polaroid-style image gallery */ /* You need to set variables yourself to make it running correctly */ .tiny-photos { width: 80vw; position: relative; left: calc(-40vw + 50%); } .tiny-photos ul { list-style: none; font-family: “FusionPix”; font-size: var(—fs—1); color: var(—text-color); } .tiny-photos > ul { display: flex; padding: var(—space-s); gap: var(—space-3xs); flex-wrap: wrap; flex-direction: row; justify-content: center; } .tiny-photos > ul > li { background-color: var(—tp-frame-color); box-shadow: 0px 3px 3px var(—tp-shadow-color); display: flex; flex-direction: column; width: min-content; height: min-content; } .tiny-photos > ul > li img { height: auto; width: auto; max-width: 20rem; max-height: 20rem; margin: 0.7em; margin-bottom: -0.1rem; } .tiny-photos > ul > li ul { margin: 0.4em; margin-left: 0; padding-left: 1em; } /* Rotation */ .tiny-photos > ul > li:first-child { rotate: -3deg; } .tiny-photos > ul > li:nth-child(odd) { margin-right: 1em; } .tiny-photos > ul > li:nth-child(even) { rotate: -1deg; margin-top: 1em; } .tiny-photos > ul > li:nth-child(3n) { rotate: -3deg; } .tiny-photos > ul > li:nth-child(5n) { rotate: 1deg; margin-top: 1.5em; } .tiny-photos > ul > li:nth-child(7n) { rotate: 4deg; margin-bottom: 1em; } .tiny-photos > ul > li:nth-child(11n) { rotate: 2deg; margin-top: 0.5em; } .tiny-photos > ul > li:nth-child(3), .tiny-photos > ul > li:nth-child(13n) { rotate: 6deg; } .tiny-photos > ul > li:nth-child(17n) { rotate: -5deg; } /* Hover effect, only on larger screens */ @media (min-width: 799px) { .tiny-photos > ul > li:hover { z-index: 99; transform: scale(1.3); box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02), 6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028), 12.5px 12.5px 10px rgba(0, 0, 0, 0.035), 22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042), 41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05), 100px 100px 80px rgba(0, 0, 0, 0.07); } .tiny-photos > ul > li { transition: 300ms ease; } }
原文： https://flyfish.info/a-polaroid-style-image-gallery-rewritten/