Piclsit自定义链接

神仙阿旺 — Sun, 19 Jul 2026 00:34:47 +0800

响应式图片卡

html
# 响应式图片卡片
<a href="$url" target="_blank"> <img src="$url" alt="$fileName" loading="lazy" style="width:100%;max-width:var(--size);height:auto;display:block;--size:600px;border:1px solid black;"> </a>

html
<!-- 外层锚点标签：使图片可点击 -->
<a href="$url" target="_blank">
 <!-- 图片标签 -->
 <img
 src="$url"
 alt="$fileName"
 loading="lazy"
 style="
 width:100%; /* 图片宽度占满容器 */
 max-width:var(--size); /* 最大宽度受 --size 变量限制 */
 height:auto; /* 高度自动适配，保持宽高比 */
 display:block; /* 块级显示，消除inline间距 */
 --size:600px; /* 自定义CSS变量，最大宽度为600px */
 border:1px solid black; /* 1px 纯黑色边框 */
 "
 >
</a>

<!--
说明：
- $url：图片链接（用于 href 和 src）
- $fileName：文件名（用于 alt 属性）
- target="_blank"：在新标签页打开链接
- loading="lazy"：图片懒加载，改善页面性能
-->

极简黑框卡

html
<a href="$url" target="_blank" style="display: inline-block; border: 0px solid black; padding: 8px; background-color: white; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);"><img src="$url" alt="$fileName" loading="lazy" style="width:100%;max-width:var(--size);height:auto;display:block;--size:600px;"></a>

投影参数调节：

方案 on 风言风语

Piclsit自定义链接

响应式图片卡

极简黑框卡