网站相册(可放大查看)
粘贴图片地址(每行一个,斜杠后可加可选的说明文字)。选择列数和圆角,然后复制现成的代码块。
使用方法可放大查看的相册
广告
网站相册(可放大查看): 用途
一个做得好的相册能在不拖慢页面的前提下展示作品、场地和产品。这个生成器用 CSS grid 构建响应式网格,可分别选择电脑和手机上的列数、缩略图比例和圆角。
点击照片会用 HTML 原生的 dialog 元素放大显示,屏幕上和键盘上都有箭头,带说明文字,按 Esc 或点击外部即可关闭。缩略图懒加载,说明文字会成为替代文本,有利于无障碍和图片 SEO。
使用方法
- 粘贴照片地址和说明文字。
- 选择列数、比例和圆角。
- 复制代码并粘贴到网站。
使用场景
- 摄影师、理发师或建筑师的作品集。
- 餐厅或商店的场地照片。
- 服务的前后对比。
常见问题
不用库也能运行吗?
可以。网格使用 CSS grid,放大功能使用浏览器原生的 dialog 元素,它自带深色背景、焦点管理和按 Esc 键关闭。脚本只有几行,仅用于切换照片。
照片会拖慢加载吗?
缩略图使用 loading=lazy 和 decoding=async:只有接近屏幕时才会下载。想更轻量,可以为缩略图生成较小的版本(网站图片工具可以做到),仅在放大时使用大图。
需要写说明文字吗?
说明文字会成为照片的替代文本(alt),屏幕阅读器会朗读它,也有助于图片 SEO。请描述画面内容,例如“渐变短发与胡须造型”,而不是“照片 1”。
真的免费吗?
是的,100%免费。无需注册,无需订阅,不限使用次数。所有工具:Tools123是免费的。