ZH
PortuguêsEnglishEspañolDeutschFrançaisItaliano日本語Русский中文
首页 收藏
Voltar

网站相册(可放大查看)

粘贴图片地址(每行一个,斜杠后可加可选的说明文字)。选择列数和圆角,然后复制现成的代码块。

使用方法

可放大查看的相册


可用语言: PortuguêsEspañolEnglishDeutschFrançaisItaliano日本語Русский中文

下一个工具CSS 瀑布流相册(Pinterest 风格)→
广告

网站相册(可放大查看): 用途

一个做得好的相册能在不拖慢页面的前提下展示作品、场地和产品。这个生成器用 CSS grid 构建响应式网格,可分别选择电脑和手机上的列数、缩略图比例和圆角。

点击照片会用 HTML 原生的 dialog 元素放大显示,屏幕上和键盘上都有箭头,带说明文字,按 Esc 或点击外部即可关闭。缩略图懒加载,说明文字会成为替代文本,有利于无障碍和图片 SEO。

使用方法

  1. 粘贴照片地址和说明文字。
  2. 选择列数、比例和圆角。
  3. 复制代码并粘贴到网站。

使用场景

  • 摄影师、理发师或建筑师的作品集。
  • 餐厅或商店的场地照片。
  • 服务的前后对比。

常见问题

不用库也能运行吗?

可以。网格使用 CSS grid,放大功能使用浏览器原生的 dialog 元素,它自带深色背景、焦点管理和按 Esc 键关闭。脚本只有几行,仅用于切换照片。

照片会拖慢加载吗?

缩略图使用 loading=lazy 和 decoding=async:只有接近屏幕时才会下载。想更轻量,可以为缩略图生成较小的版本(网站图片工具可以做到),仅在放大时使用大图。

需要写说明文字吗?

说明文字会成为照片的替代文本(alt),屏幕阅读器会朗读它,也有助于图片 SEO。请描述画面内容,例如“渐变短发与胡须造型”,而不是“照片 1”。

真的免费吗?

是的,100%免费。无需注册,无需订阅,不限使用次数。所有工具:Tools123是免费的。

相似工具

非常感谢您的支持!

每一笔捐赠都有助于维持网站运行。这些工具旨在帮助您,但我们有服务器开销。如果您愿意支持,将不胜感激!请选择或输入金额:

通过Stripe安全支付。将在新标签页打开。

工具按现状提供,不作任何保证。我们不对结果及其使用承担责任。