连接点303 · 记录点东西https://33.ax/tags/%E5%9B%BE%E7%89%87/2026-10-18T22:54:00+08:00yueheiHugoyueheihttps://33.ax/authors/yuehei/https://33.ax/notes/seven-images-test/2026-10-18T22:54:00+08:002026-10-18T22:54:00+08:00

<p>七张图片放在同一条「瞬间」里，测试<strong>六格预览和剩余数量提示</strong>。</p> <p>页面先显示六张，第六格上的 <code>+1</code> 表示还有一张。点击任意图片打开灯箱后，可以继续浏览整组图片。</p>

<p>七张图片放在同一条「瞬间」里，测试<strong>六格预览和剩余数量提示</strong>。</p> <p>页面先显示六张，第六格上的 <code>+1</code> 表示还有一张。点击任意图片打开灯箱后，可以继续浏览整组图片。</p>yueheihttps://33.ax/authors/yuehei/https://33.ax/notes/four-images-test/2026-10-18T22:53:00+08:002026-10-18T22:53:00+08:00

<p>这是一条<strong>四图测试</strong>，用两行两列展示四张风景图片。</p> <ul> <li>检查四格之间的间距与圆角。</li> <li>检查横图、竖图混排时的裁切。</li> <li>点击图片，比较缩略图与完整画面。</li> </ul> <div class="note-gallery note-gallery--pair" role="group" aria-label="配图，共 4 张"><div class="note-gallery-tile"><a class="lightgallery" target="_blank" href="/images/landscapes/unsplash-dolomites-lake_hu_b92d2018b4814f25.webp" title="多洛米蒂山湖" data-thumbnail="/images/landscapes/unsplash-dolomites-lake_hu_b92d2018b4814f25.webp" data-sub-html="<h2>多洛米蒂山湖</h2>"><img loading="lazy" src='/images/landscapes/unsplash-dolomites-lake_hu_b92d2018b4814f25.webp' alt="多洛米蒂山湖" height="1440" width="1080" decoding="async"></a></div><div class="note-gallery-tile"><a class="lightgallery" target="_blank" href="/images/landscapes/unsplash-braies-luca_hu_6af4dd3b1c140a58.webp" title="布莱埃斯湖" data-thumbnail="/images/landscapes/unsplash-braies-luca_hu_6af4dd3b1c140a58.webp" data-sub-html="<h2>布莱埃斯湖</h2>"><img loading="lazy" src='/images/landscapes/unsplash-braies-luca_hu_6af4dd3b1c140a58.webp' alt="布莱埃斯湖" height="1620" width="1080" decoding="async"></a></div><div class="note-gallery-tile"><a class="lightgallery" target="_blank" href="/images/landscapes/unsplash-moraine-sun_hu_31c3850329b94686.webp" title="梦莲湖晴日" data-thumbnail="/images/landscapes/unsplash-moraine-sun_hu_31c3850329b94686.webp" data-sub-html="<h2>梦莲湖晴日</h2>"><img loading="lazy" src='/images/landscapes/unsplash-moraine-sun_hu_31c3850329b94686.webp' alt="梦莲湖晴日" height="1620" width="1080" decoding="async"></a></div><div class="note-gallery-tile"><a class="lightgallery" target="_blank" href="/images/landscapes/pexels-logan_hu_39c0e365a9f2178.webp" title="开阔太浩湖" data-thumbnail="/images/landscapes/pexels-logan_hu_39c0e365a9f2178.webp" data-sub-html="<h2>开阔太浩湖</h2>"><img loading="lazy" src='/images/landscapes/pexels-logan_hu_39c0e365a9f2178.webp' alt="开阔太浩湖" height="720" width="1080" decoding="async"></a></div></div> <p>配图复用站内素材，仅供布局测试。</p>

<p>这是一条<strong>四图测试</strong>，用两行两列展示四张风景图片。</p> <ul> <li>检查四格之间的间距与圆角。</li> <li>检查横图、竖图混排时的裁切。</li> <li>点击图片，比较缩略图与完整画面。</li> </ul> <div class="note-gallery note-gallery--pair" role="group" aria-label="配图，共 4 张"><div class="note-gallery-tile"><a class="lightgallery" target="_blank" href="/images/landscapes/unsplash-dolomites-lake_hu_b92d2018b4814f25.webp" title="多洛米蒂山湖" data-thumbnail="/images/landscapes/unsplash-dolomites-lake_hu_b92d2018b4814f25.webp" data-sub-html="<h2>多洛米蒂山湖</h2>"><img loading="lazy" src='/images/landscapes/unsplash-dolomites-lake_hu_b92d2018b4814f25.webp' alt="多洛米蒂山湖" height="1440" width="1080" decoding="async"></a></div><div class="note-gallery-tile"><a class="lightgallery" target="_blank" href="/images/landscapes/unsplash-braies-luca_hu_6af4dd3b1c140a58.webp" title="布莱埃斯湖" data-thumbnail="/images/landscapes/unsplash-braies-luca_hu_6af4dd3b1c140a58.webp" data-sub-html="<h2>布莱埃斯湖</h2>"><img loading="lazy" src='/images/landscapes/unsplash-braies-luca_hu_6af4dd3b1c140a58.webp' alt="布莱埃斯湖" height="1620" width="1080" decoding="async"></a></div><div class="note-gallery-tile"><a class="lightgallery" target="_blank" href="/images/landscapes/unsplash-moraine-sun_hu_31c3850329b94686.webp" title="梦莲湖晴日" data-thumbnail="/images/landscapes/unsplash-moraine-sun_hu_31c3850329b94686.webp" data-sub-html="<h2>梦莲湖晴日</h2>"><img loading="lazy" src='/images/landscapes/unsplash-moraine-sun_hu_31c3850329b94686.webp' alt="梦莲湖晴日" height="1620" width="1080" decoding="async"></a></div><div class="note-gallery-tile"><a class="lightgallery" target="_blank" href="/images/landscapes/pexels-logan_hu_39c0e365a9f2178.webp" title="开阔太浩湖" data-thumbnail="/images/landscapes/pexels-logan_hu_39c0e365a9f2178.webp" data-sub-html="<h2>开阔太浩湖</h2>"><img loading="lazy" src='/images/landscapes/pexels-logan_hu_39c0e365a9f2178.webp' alt="开阔太浩湖" height="720" width="1080" decoding="async"></a></div></div> <p>配图复用站内素材，仅供布局测试。</p>yueheihttps://33.ax/authors/yuehei/https://33.ax/notes/three-images-test/2026-10-18T22:52:00+08:002026-10-18T22:52:00+08:00

<p>三张图片，试试<strong>左侧大图、右侧两张小图</strong>的拼图方式。</p> <p>缩略图会裁切填满格子，点击后可以查看完整画面。这里复用站内风景素材，日景和暮色两张为 AI 生成图片。</p>

<p>三张图片，试试<strong>左侧大图、右侧两张小图</strong>的拼图方式。</p> <p>缩略图会裁切填满格子，点击后可以查看完整画面。这里复用站内风景素材，日景和暮色两张为 AI 生成图片。</p>yueheihttps://33.ax/authors/yuehei/https://33.ax/notes/single-image-test/2026-10-18T22:51:00+08:002026-10-18T22:51:00+08:00

<p>这是一条<strong>单张竖图测试</strong>。配图复用站内的布莱埃斯湖素材，原图比例为 2:3。</p> <p>这里不把它裁成横图或正方形，而是完整显示画面，限制预览高度。桌面端右侧会自然留白，手机端也应保持同样的比例。</p>

<p>这是一条<strong>单张竖图测试</strong>。配图复用站内的布莱埃斯湖素材，原图比例为 2:3。</p> <p>这里不把它裁成横图或正方形，而是完整显示画面，限制预览高度。桌面端右侧会自然留白，手机端也应保持同样的比例。</p>yueheihttps://33.ax/authors/yuehei/https://33.ax/notes/day-and-dusk-test/2026-10-18T22:48:00+08:002026-10-18T22:48:00+08:00

<p>下面复用两张首页背景图：一张是日景，一张是暮色，用来检查两图布局和点击放大的效果。这些是 AI 生成的测试配图，不是实地拍摄记录。</p> <div class="note-gallery note-gallery--pair" role="group" aria-label="配图，共 2 张"><div class="note-gallery-tile"><a class="lightgallery" target="_blank" href="/images/landscapes/alpine-lake-day_hu_46734f3782110e92.webp" title="高山静湖，日景" data-thumbnail="/images/landscapes/alpine-lake-day_hu_46734f3782110e92.webp" data-sub-html="<h2>高山静湖，日景</h2>"><img loading="lazy" src='/images/landscapes/alpine-lake-day_hu_46734f3782110e92.webp' alt="高山静湖，日景" height="364" width="1080" decoding="async"></a></div><div class="note-gallery-tile"><a class="lightgallery" target="_blank" href="/images/landscapes/alpine-lake-dusk_hu_8a1a038d3be174ba.webp" title="高山静湖，暮色" data-thumbnail="/images/landscapes/alpine-lake-dusk_hu_8a1a038d3be174ba.webp" data-sub-html="<h2>高山静湖，暮色</h2>"><img loading="lazy" src='/images/landscapes/alpine-lake-dusk_hu_8a1a038d3be174ba.webp' alt="高山静湖，暮色" height="364" width="1080" decoding="async"></a></div></div> <p>图片之后仍然可以接着写文字，保持卡片内的阅读顺序。</p>

<p>下面复用两张首页背景图：一张是日景，一张是暮色，用来检查两图布局和点击放大的效果。这些是 AI 生成的测试配图，不是实地拍摄记录。</p> <div class="note-gallery note-gallery--pair" role="group" aria-label="配图，共 2 张"><div class="note-gallery-tile"><a class="lightgallery" target="_blank" href="/images/landscapes/alpine-lake-day_hu_46734f3782110e92.webp" title="高山静湖，日景" data-thumbnail="/images/landscapes/alpine-lake-day_hu_46734f3782110e92.webp" data-sub-html="<h2>高山静湖，日景</h2>"><img loading="lazy" src='/images/landscapes/alpine-lake-day_hu_46734f3782110e92.webp' alt="高山静湖，日景" height="364" width="1080" decoding="async"></a></div><div class="note-gallery-tile"><a class="lightgallery" target="_blank" href="/images/landscapes/alpine-lake-dusk_hu_8a1a038d3be174ba.webp" title="高山静湖，暮色" data-thumbnail="/images/landscapes/alpine-lake-dusk_hu_8a1a038d3be174ba.webp" data-sub-html="<h2>高山静湖，暮色</h2>"><img loading="lazy" src='/images/landscapes/alpine-lake-dusk_hu_8a1a038d3be174ba.webp' alt="高山静湖，暮色" height="364" width="1080" decoding="async"></a></div></div> <p>图片之后仍然可以接着写文字，保持卡片内的阅读顺序。</p>